@pine-ds/core 3.4.2 → 3.5.0

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

@@ -1,6 +1,11 @@
 import { Host, h } from "@stencil/core";
 export class PdsTable {
     constructor() {
+        this.scrollContainer = null;
+        this._responsiveHandleScroll = null;
+        this._responsiveHandleResize = null;
+        this._responsiveResizeObserver = null;
+        this._teardownResponsive = null;
         /**
          * The name of the column being sorted.
          * @defaultValue null
@@ -15,6 +20,100 @@ export class PdsTable {
     componentWillLoad() {
         this.sortingColumn = null;
     }
+    componentDidLoad() {
+        if (this.responsive) {
+            this.setupResponsiveScrolling();
+        }
+    }
+    disconnectedCallback() {
+        if (this._teardownResponsive) {
+            this._teardownResponsive();
+            this._teardownResponsive = null;
+        }
+    }
+    /**
+     * Sets up responsive scrolling behavior for the table.
+     *
+     * This method creates a horizontal scrolling system where:
+     * - The table content can scroll horizontally when it exceeds the container width
+     * - Scroll shadows appear at the left/right edges to indicate scrollable content
+     * - Fixed columns remain sticky during horizontal scrolling
+     * - Shadows respect border-radius and don't appear when there's nothing to scroll
+     *
+     * Architecture:
+     * - Host element: Contains everything, respects parent constraints
+     * - Container element: Handles horizontal scrolling (overflow-x: auto)
+     * - Shadow elements: Positioned fixed relative to host, show scroll indicators
+     *
+     * @private
+     */
+    setupResponsiveScrolling() {
+        var _a, _b, _c;
+        const container = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.pds-table-responsive-container');
+        const leftShadow = (_b = this.el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.scroll-shadow-left');
+        const rightShadow = (_c = this.el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.scroll-shadow-right');
+        if (!container || !leftShadow || !rightShadow)
+            return;
+        // Store container reference for cleanup
+        this.scrollContainer = container;
+        /**
+         * Updates the visibility of scroll shadows based on current scroll position.
+         * Left shadow: Shows when scrolled away from start (hidden if fixedColumn is enabled)
+         * Right shadow: Shows when there's content to scroll and not at the end
+         */
+        this._responsiveHandleScroll = () => {
+            if (!this.scrollContainer)
+                return;
+            const scrollLeft = this.scrollContainer.scrollLeft;
+            const maxScrollLeft = this.scrollContainer.scrollWidth - this.scrollContainer.clientWidth;
+            // Show left shadow when scrolled away from start, but not if there's a fixed column
+            leftShadow.style.opacity = (scrollLeft > 0 && !this.fixedColumn) ? '1' : '0';
+            // Show right shadow only if there's content to scroll AND not at end
+            rightShadow.style.opacity = (maxScrollLeft > 0 && scrollLeft < maxScrollLeft - 1) ? '1' : '0';
+        };
+        // Add scroll event listener to container element
+        this.scrollContainer.addEventListener('scroll', this._responsiveHandleScroll, { passive: true });
+        // Add resize observer to update shadows when container size changes
+        if (typeof window !== 'undefined' && window.ResizeObserver) {
+            try {
+                this._responsiveResizeObserver = new ResizeObserver(() => {
+                    var _a;
+                    (_a = this._responsiveHandleScroll) === null || _a === void 0 ? void 0 : _a.call(this);
+                });
+                this._responsiveResizeObserver.observe(this.scrollContainer);
+            }
+            catch (error) {
+                // ResizeObserver not available in some environments (e.g., tests)
+                // Fall back to window resize listener only
+            }
+        }
+        // Listen for window resize as fallback
+        if (typeof window !== 'undefined') {
+            this._responsiveHandleResize = () => {
+                var _a;
+                (_a = this._responsiveHandleScroll) === null || _a === void 0 ? void 0 : _a.call(this);
+            };
+            window.addEventListener('resize', this._responsiveHandleResize);
+        }
+        // Create teardown function for cleanup
+        this._teardownResponsive = () => {
+            if (this.scrollContainer && this._responsiveHandleScroll) {
+                this.scrollContainer.removeEventListener('scroll', this._responsiveHandleScroll);
+                this.scrollContainer = null;
+            }
+            if (this._responsiveResizeObserver) {
+                this._responsiveResizeObserver.disconnect();
+                this._responsiveResizeObserver = null;
+            }
+            if (typeof window !== 'undefined' && this._responsiveHandleResize) {
+                window.removeEventListener('resize', this._responsiveHandleResize);
+                this._responsiveHandleResize = null;
+            }
+            this._responsiveHandleScroll = null;
+        };
+        // Initial check after setup
+        this._responsiveHandleScroll();
+    }
     classNames() {
         const classNames = ['pds-table'];
         if (this.compact) {
@@ -42,10 +141,10 @@ export class PdsTable {
             const valueA = a.querySelector(`pds-table-cell:nth-child(${columnIndex + 1})`).textContent.trim();
             const valueB = b.querySelector(`pds-table-cell:nth-child(${columnIndex + 1})`).textContent.trim();
             if (direction === 'asc') {
-                return valueA.localeCompare(valueB);
+                return valueA.localeCompare(valueB, undefined, { sensitivity: 'base' });
             }
             else {
-                return valueB.localeCompare(valueA);
+                return valueB.localeCompare(valueA, undefined, { sensitivity: 'base' });
             }
         });
         // Clear and append the sorted rows back to the table body
@@ -83,7 +182,10 @@ export class PdsTable {
         headerCheckbox.indeterminate = !allSelectedRows && !noneSelectedRows;
     }
     render() {
-        return (h(Host, { key: '994a8ae5aae1ddcc7dd0271187dd65718bc1401f', class: this.classNames(), id: this.componentId, role: "grid", selectable: this.selectable, tabindex: "0" }, h("slot", { key: 'e07c97a88d1bf1b2efb92f2cdf0159fc93ca9f9a' })));
+        if (this.responsive) {
+            return (h(Host, { class: "pds-table is-responsive pds-table-responsive-host", id: this.componentId, role: "grid", selectable: this.selectable, tabindex: "0" }, h("div", { class: "scroll-shadow-left" }), h("div", { class: "scroll-shadow-right" }), h("div", { class: "pds-table-responsive-container" }, h("div", { class: "pds-table-responsive-wrapper" }, h("div", { class: this.classNames() }, h("slot", null))))));
+        }
+        return (h(Host, { class: this.classNames(), id: this.componentId, role: "grid", selectable: this.selectable, tabindex: "0" }, h("slot", null)));
     }
     static get is() { return "pds-table"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"pds-table.js","sourceRoot":"","sources":["../../../src/components/pds-table/pds-table.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, h, Prop, State, Listen } from '@stencil/core';\n\n@Component({\n  tag: 'pds-table',\n  styleUrls: ['pds-table.scss'],\n  shadow: true,\n})\nexport class PdsTable {\n  @Element() el: HTMLPdsTableElement;\n\n  /**\n   * Determines if the table displays with reduced table cell padding.\n   */\n  @Prop() compact: boolean;\n\n  /**\n   * A unique identifier used for the table `id` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Enables the table to be responsive by horizontally scrolling on smaller screens.\n   */\n  @Prop() responsive: boolean;\n\n  /**\n   * Determines if the should display a fixed first column.\n   */\n  @Prop() fixedColumn: boolean;\n\n  /**\n   * Determines if the table displays checkboxes for selectable rows.\n   */\n  @Prop() selectable: boolean;\n\n  /**\n   * The name of the column being sorted.\n   * @defaultValue null\n   */\n  @State() sortingColumn: string | null = null;\n\n  /**\n   * The direction of sorting.\n   * @defaultValue 'asc'\n   */\n  @State() sortingDirection: 'asc' | 'desc' = 'asc';\n\n\n  /**\n   * Event that is emitted when the checkbox is clicked, carrying the rowIndex and selected value.\n   */\n  @Event() pdsTableSelect: EventEmitter<{ rowIndex: number; isSelected: boolean }>;\n\n  /**\n   * Event that is emitted when the select all checkbox is clicked, carrying the selected value.\n   */\n  @Event() pdsTableSelectAll: EventEmitter<{ isSelected: boolean }>;\n\n  componentWillLoad() {\n    this.sortingColumn = null;\n  }\n\n  private classNames() {\n    const classNames = ['pds-table'];\n\n    if (this.compact) {\n      classNames.push('is-compact');\n    }\n\n    if (this.responsive) {\n      classNames.push('is-responsive');\n    }\n\n    return classNames.join('  ');\n  }\n\n  private sortTable(column: string, direction: 'asc' | 'desc') {\n    const tableBody = this.el.querySelector('pds-table-body');\n\n    // Get the rows in the table body\n    const tableRows = Array.from(tableBody.querySelectorAll('pds-table-row'));\n\n    // Find the column index based on the column name\n    const columnHeaderCells: HTMLElement[] = Array.from(\n      this.el.querySelectorAll('pds-table-head-cell[sortable]')\n    );\n\n    const columnHeaderCell = columnHeaderCells.find(\n      (cell) => cell.innerText.trim() === column\n    );\n\n    if (!columnHeaderCell) {\n      console.warn(`Column \"${column}\" not found.`);\n      return;\n    }\n\n    const columnIndex = columnHeaderCells.indexOf(columnHeaderCell);\n\n    // Sort the rows based on the content of the specified column\n    tableRows.sort((a, b) => {\n      const valueA = a.querySelector(`pds-table-cell:nth-child(${columnIndex + 1})`).textContent.trim();\n      const valueB = b.querySelector(`pds-table-cell:nth-child(${columnIndex + 1})`).textContent.trim();\n\n      if (direction === 'asc') {\n        return valueA.localeCompare(valueB);\n      } else {\n        return valueB.localeCompare(valueA);\n      }\n    });\n\n    // Clear and append the sorted rows back to the table body\n    tableBody.innerHTML = '';\n    tableRows.forEach((row) => {\n      tableBody.appendChild(row);\n    });\n  }\n\n  @Listen('pdsTableSort')\n  handleTableSort(event: CustomEvent<{ column: string; direction: 'asc' | 'desc' }>) {\n    const { direction } = event.detail;\n    this.sortTable(event.detail.column, direction);\n    this.sortingColumn = event.detail.column;\n    this.sortingDirection = direction;\n  }\n\n  @Listen('pdsTableSelectAll')\n  handleTableSelectAll(event: CustomEvent<{ isSelected: boolean }>) {\n    if (event.defaultPrevented) return;\n\n    const pdsTableBody = this.el.querySelector('pds-table-body');\n    const tableRows = Array.from(pdsTableBody.querySelectorAll('pds-table-row'));\n\n    tableRows.forEach((row) => {\n      row.isSelected = event.detail.isSelected;\n    });\n  }\n\n  @Listen('pdsTableRowSelected')\n  async handleTableSelect(event: CustomEvent<{ rowIndex: number; isSelected: boolean }>) {\n    if (event.defaultPrevented) return;\n\n    const allTableRows = this.el.querySelectorAll('pds-table-row');\n    const allSelectedRows = Array.from(allTableRows).every((row) => row.isSelected);\n    const noneSelectedRows = Array.from(allTableRows).every((row) => !row.isSelected);\n    const pdsTableHead = this.el.querySelector('pds-table-head');\n    if (!pdsTableHead) return;\n\n    const headerCheckbox = pdsTableHead.shadowRoot.querySelector('pds-checkbox');\n    headerCheckbox.checked = allSelectedRows;\n    headerCheckbox.indeterminate = !allSelectedRows && !noneSelectedRows;\n  }\n\n  render() {\n    return (\n      <Host\n        class={this.classNames()}\n        id={this.componentId}\n        role=\"grid\"\n        selectable={this.selectable}\n        tabindex=\"0\"\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pds-table.js","sourceRoot":"","sources":["../../../src/components/pds-table/pds-table.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, h, Prop, State, Listen } from '@stencil/core';\n\n@Component({\n  tag: 'pds-table',\n  styleUrls: ['pds-table.scss'],\n  shadow: true,\n})\nexport class PdsTable {\n  @Element() el: HTMLPdsTableElement;\n  private scrollContainer: HTMLElement | null = null;\n  private _responsiveHandleScroll: (() => void) | null = null;\n  private _responsiveHandleResize: (() => void) | null = null;\n  private _responsiveResizeObserver: ResizeObserver | null = null;\n  private _teardownResponsive: (() => void) | null = null;\n\n  /**\n   * Determines if the table displays with reduced table cell padding.\n   */\n  @Prop() compact: boolean;\n\n  /**\n   * A unique identifier used for the table `id` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Enables the table to be responsive by horizontally scrolling on smaller screens.\n   */\n  @Prop() responsive: boolean;\n\n  /**\n   * Determines if the should display a fixed first column.\n   */\n  @Prop() fixedColumn: boolean;\n\n  /**\n   * Determines if the table displays checkboxes for selectable rows.\n   */\n  @Prop() selectable: boolean;\n\n  /**\n   * The name of the column being sorted.\n   * @defaultValue null\n   */\n  @State() sortingColumn: string | null = null;\n\n  /**\n   * The direction of sorting.\n   * @defaultValue 'asc'\n   */\n  @State() sortingDirection: 'asc' | 'desc' = 'asc';\n\n\n  /**\n   * Event that is emitted when the checkbox is clicked, carrying the rowIndex and selected value.\n   */\n  @Event() pdsTableSelect: EventEmitter<{ rowIndex: number; isSelected: boolean }>;\n\n  /**\n   * Event that is emitted when the select all checkbox is clicked, carrying the selected value.\n   */\n  @Event() pdsTableSelectAll: EventEmitter<{ isSelected: boolean }>;\n\n  componentWillLoad() {\n    this.sortingColumn = null;\n  }\n\n  componentDidLoad() {\n    if (this.responsive) {\n      this.setupResponsiveScrolling();\n    }\n  }\n\n  disconnectedCallback() {\n    if (this._teardownResponsive) {\n      this._teardownResponsive();\n      this._teardownResponsive = null;\n    }\n  }\n\n  /**\n   * Sets up responsive scrolling behavior for the table.\n   *\n   * This method creates a horizontal scrolling system where:\n   * - The table content can scroll horizontally when it exceeds the container width\n   * - Scroll shadows appear at the left/right edges to indicate scrollable content\n   * - Fixed columns remain sticky during horizontal scrolling\n   * - Shadows respect border-radius and don't appear when there's nothing to scroll\n   *\n   * Architecture:\n   * - Host element: Contains everything, respects parent constraints\n   * - Container element: Handles horizontal scrolling (overflow-x: auto)\n   * - Shadow elements: Positioned fixed relative to host, show scroll indicators\n   *\n   * @private\n   */\n  private setupResponsiveScrolling() {\n    const container = this.el.shadowRoot?.querySelector('.pds-table-responsive-container') as HTMLElement;\n    const leftShadow = this.el.shadowRoot?.querySelector('.scroll-shadow-left') as HTMLElement;\n    const rightShadow = this.el.shadowRoot?.querySelector('.scroll-shadow-right') as HTMLElement;\n\n    if (!container || !leftShadow || !rightShadow) return;\n\n    // Store container reference for cleanup\n    this.scrollContainer = container;\n\n    /**\n     * Updates the visibility of scroll shadows based on current scroll position.\n     * Left shadow: Shows when scrolled away from start (hidden if fixedColumn is enabled)\n     * Right shadow: Shows when there's content to scroll and not at the end\n     */\n    this._responsiveHandleScroll = () => {\n      if (!this.scrollContainer) return;\n\n      const scrollLeft = this.scrollContainer.scrollLeft;\n      const maxScrollLeft = this.scrollContainer.scrollWidth - this.scrollContainer.clientWidth;\n\n      // Show left shadow when scrolled away from start, but not if there's a fixed column\n      leftShadow.style.opacity = (scrollLeft > 0 && !this.fixedColumn) ? '1' : '0';\n\n      // Show right shadow only if there's content to scroll AND not at end\n      rightShadow.style.opacity = (maxScrollLeft > 0 && scrollLeft < maxScrollLeft - 1) ? '1' : '0';\n    };\n\n    // Add scroll event listener to container element\n    this.scrollContainer.addEventListener('scroll', this._responsiveHandleScroll, { passive: true });\n\n    // Add resize observer to update shadows when container size changes\n    if (typeof window !== 'undefined' && window.ResizeObserver) {\n      try {\n        this._responsiveResizeObserver = new ResizeObserver(() => {\n          this._responsiveHandleScroll?.();\n        });\n        this._responsiveResizeObserver.observe(this.scrollContainer);\n      } catch (error) {\n        // ResizeObserver not available in some environments (e.g., tests)\n        // Fall back to window resize listener only\n      }\n    }\n\n    // Listen for window resize as fallback\n    if (typeof window !== 'undefined') {\n      this._responsiveHandleResize = () => {\n        this._responsiveHandleScroll?.();\n      };\n      window.addEventListener('resize', this._responsiveHandleResize);\n    }\n\n    // Create teardown function for cleanup\n    this._teardownResponsive = () => {\n      if (this.scrollContainer && this._responsiveHandleScroll) {\n        this.scrollContainer.removeEventListener('scroll', this._responsiveHandleScroll);\n        this.scrollContainer = null;\n      }\n\n      if (this._responsiveResizeObserver) {\n        this._responsiveResizeObserver.disconnect();\n        this._responsiveResizeObserver = null;\n      }\n\n      if (typeof window !== 'undefined' && this._responsiveHandleResize) {\n        window.removeEventListener('resize', this._responsiveHandleResize);\n        this._responsiveHandleResize = null;\n      }\n\n      this._responsiveHandleScroll = null;\n    };\n\n    // Initial check after setup\n    this._responsiveHandleScroll();\n  }\n\n\n  private classNames() {\n    const classNames = ['pds-table'];\n\n    if (this.compact) {\n      classNames.push('is-compact');\n    }\n\n    if (this.responsive) {\n      classNames.push('is-responsive');\n    }\n\n    return classNames.join('  ');\n  }\n\n  private sortTable(column: string, direction: 'asc' | 'desc') {\n    const tableBody = this.el.querySelector('pds-table-body');\n\n    // Get the rows in the table body\n    const tableRows = Array.from(tableBody.querySelectorAll('pds-table-row'));\n\n    // Find the column index based on the column name\n    const columnHeaderCells: HTMLElement[] = Array.from(\n      this.el.querySelectorAll('pds-table-head-cell[sortable]')\n    );\n\n    const columnHeaderCell = columnHeaderCells.find(\n      (cell) => cell.innerText.trim() === column\n    );\n\n    if (!columnHeaderCell) {\n      console.warn(`Column \"${column}\" not found.`);\n      return;\n    }\n\n    const columnIndex = columnHeaderCells.indexOf(columnHeaderCell);\n\n    // Sort the rows based on the content of the specified column\n    tableRows.sort((a, b) => {\n      const valueA = a.querySelector(`pds-table-cell:nth-child(${columnIndex + 1})`).textContent.trim();\n      const valueB = b.querySelector(`pds-table-cell:nth-child(${columnIndex + 1})`).textContent.trim();\n\n      if (direction === 'asc') {\n        return valueA.localeCompare(valueB, undefined, { sensitivity: 'base' });\n      } else {\n        return valueB.localeCompare(valueA, undefined, { sensitivity: 'base' });\n      }\n    });\n\n    // Clear and append the sorted rows back to the table body\n    tableBody.innerHTML = '';\n    tableRows.forEach((row) => {\n      tableBody.appendChild(row);\n    });\n  }\n\n  @Listen('pdsTableSort')\n  handleTableSort(event: CustomEvent<{ column: string; direction: 'asc' | 'desc' }>) {\n    const { direction } = event.detail;\n    this.sortTable(event.detail.column, direction);\n    this.sortingColumn = event.detail.column;\n    this.sortingDirection = direction;\n  }\n\n  @Listen('pdsTableSelectAll')\n  handleTableSelectAll(event: CustomEvent<{ isSelected: boolean }>) {\n    if (event.defaultPrevented) return;\n\n    const pdsTableBody = this.el.querySelector('pds-table-body');\n    const tableRows = Array.from(pdsTableBody.querySelectorAll('pds-table-row'));\n\n    tableRows.forEach((row) => {\n      row.isSelected = event.detail.isSelected;\n    });\n  }\n\n  @Listen('pdsTableRowSelected')\n  async handleTableSelect(event: CustomEvent<{ rowIndex: number; isSelected: boolean }>) {\n    if (event.defaultPrevented) return;\n\n    const allTableRows = this.el.querySelectorAll('pds-table-row');\n    const allSelectedRows = Array.from(allTableRows).every((row) => row.isSelected);\n    const noneSelectedRows = Array.from(allTableRows).every((row) => !row.isSelected);\n    const pdsTableHead = this.el.querySelector('pds-table-head');\n    if (!pdsTableHead) return;\n\n    const headerCheckbox = pdsTableHead.shadowRoot.querySelector('pds-checkbox');\n    headerCheckbox.checked = allSelectedRows;\n    headerCheckbox.indeterminate = !allSelectedRows && !noneSelectedRows;\n  }\n\n  render() {\n    if (this.responsive) {\n      return (\n        <Host\n          class=\"pds-table is-responsive pds-table-responsive-host\"\n          id={this.componentId}\n          role=\"grid\"\n          selectable={this.selectable}\n          tabindex=\"0\"\n        >\n          <div class=\"scroll-shadow-left\"></div>\n          <div class=\"scroll-shadow-right\"></div>\n          <div class=\"pds-table-responsive-container\">\n            <div class=\"pds-table-responsive-wrapper\">\n              <div class={this.classNames()}>\n                <slot></slot>\n              </div>\n            </div>\n          </div>\n        </Host>\n      );\n    }\n\n    return (\n      <Host\n        class={this.classNames()}\n        id={this.componentId}\n        role=\"grid\"\n        selectable={this.selectable}\n        tabindex=\"0\"\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -16,11 +16,11 @@ export default {
 
 const BaseTemplate = (args) => html`
 <pds-table
-  compact="${args.compact}"
+  ?compact=${args.compact}
   component-id="${args.componentId}"
-  fixed-column="${args.fixedColumn}"
-  responsive="${args.responsive}"
-  selectable="${args.selectable}"
+  ?fixed-column=${args.fixedColumn}
+  ?responsive=${args.responsive}
+  ?selectable=${args.selectable}
 >
   <pds-table-head>
     <pds-table-head-cell>Column Title</pds-table-head-cell>
@@ -46,13 +46,49 @@ const BaseTemplate = (args) => html`
   </pds-table-body>
 </pds-table>`;
 
+const AlignmentTemplate = (args) => html`
+<pds-table
+  ?compact=${args.compact}
+  component-id="${args.componentId}"
+  ?fixed-column=${args.fixedColumn}
+  ?responsive=${args.responsive}
+  ?selectable=${args.selectable}
+>
+  <pds-table-head>
+    <pds-table-head-cell cell-align="start">Name</pds-table-head-cell>
+    <pds-table-head-cell cell-align="center">Amount</pds-table-head-cell>
+    <pds-table-head-cell cell-align="end">Status</pds-table-head-cell>
+    <pds-table-head-cell cell-align="justify">Description</pds-table-head-cell>
+  </pds-table-head>
+  <pds-table-body>
+    <pds-table-row>
+      <pds-table-cell cell-align="start">John Doe</pds-table-cell>
+      <pds-table-cell cell-align="center">$1,234.56</pds-table-cell>
+      <pds-table-cell cell-align="end">Active</pds-table-cell>
+      <pds-table-cell cell-align="justify">This is a longer description that demonstrates justified text alignment in table cells. It shows how text wraps and aligns within the cell boundaries.</pds-table-cell>
+    </pds-table-row>
+    <pds-table-row>
+      <pds-table-cell cell-align="start">Jane Smith</pds-table-cell>
+      <pds-table-cell cell-align="center">$987.65</pds-table-cell>
+      <pds-table-cell cell-align="end">Inactive</pds-table-cell>
+      <pds-table-cell cell-align="justify">Another example of justified text that spans multiple lines to show the alignment behavior in table cells with varying content lengths.</pds-table-cell>
+    </pds-table-row>
+    <pds-table-row>
+      <pds-table-cell cell-align="start">Michael Johnson</pds-table-cell>
+      <pds-table-cell cell-align="center">$2,468.13</pds-table-cell>
+      <pds-table-cell cell-align="end">Pending</pds-table-cell>
+      <pds-table-cell cell-align="justify">Short justified text example.</pds-table-cell>
+    </pds-table-row>
+  </pds-table-body>
+</pds-table>`;
+
 const ResponsiveTemplate = (args) => html`
 <pds-table
-  compact="${args.compact}"
+  ?compact=${args.compact}
   component-id="${args.componentId}"
-  fixed-column="${args.fixedColumn}"
-  responsive="${args.responsive}"
-  selectable="${args.selectable}"
+  ?fixed-column=${args.fixedColumn}
+  ?responsive=${args.responsive}
+  ?selectable=${args.selectable}
 >
   <pds-table-head>
     <pds-table-head-cell>Column Title</pds-table-head-cell>
@@ -116,11 +152,11 @@ const ResponsiveTemplate = (args) => html`
 
 const SortableTemplate = (args) => html`
 <pds-table
-  compact="${args.compact}"
+  ?compact=${args.compact}
   component-id="${args.componentId}"
-  fixed-column="${args.fixedColumn}"
-  responsive="${args.responsive}"
-  selectable="${args.selectable}"
+  ?fixed-column=${args.fixedColumn}
+  ?responsive=${args.responsive}
+  ?selectable=${args.selectable}
 >
   <pds-table-head>
     <pds-table-head-cell sortable=${args.sortable}>Name</pds-table-head-cell>
@@ -180,6 +216,15 @@ Default.args = {
   selectable: false,
 };
 
+export const Alignment = AlignmentTemplate.bind();
+Alignment.args = {
+  compact: false,
+  componentId: 'alignment',
+  fixedColumn: false,
+  responsive: false,
+  selectable: false,
+};
+
 export const Compact = BaseTemplate.bind();
 Compact.args = {
   compact: true,

package/dist/collection/components/pds-tabs/pds-tab/pds-tab.css

@@ -115,21 +115,21 @@ pds-tab {
   inset-inline-start: 0;
 }
 
-.pds-tabs--filter {
-  --color-background-tab: var(--pine-color-background-container);
-}
 .pds-tabs--filter .pds-tab {
-  background-color: var(--color-background-tab);
+  background-color: var(--pine-color-background-container-disabled);
   border-radius: 50px;
   color: var(--pine-color-text);
   padding: 6px 15px;
 }
 .pds-tabs--filter .pds-tab.is-active, .pds-tabs--filter .pds-tab[aria-selected=true] {
-  --color-background-tab: var(--pine-color-primary);
+  background-color: var(--pine-color-primary);
   color: var(--pine-color-text-primary);
 }
+.pds-tabs--filter .pds-tab.is-active:hover, .pds-tabs--filter .pds-tab[aria-selected=true]:hover {
+  background-color: var(--pine-color-primary-hover);
+}
 .pds-tabs--filter .pds-tab:hover:not(.is-active, [aria-selected=true]) {
-  --color-background-tab: var(--pine-color-background-container-hover);
+  background-color: var(--pine-color-border-disabled);
 }
 .pds-tabs--filter .pds-tab__content {
   padding-block-end: var(--pine-dimension-none);

package/dist/collection/components/pds-tabs/pds-tab/pds-tab.js

@@ -11,9 +11,9 @@ export class PdsTab {
         this.pdsTabClick.emit([index, parentComponentId]);
     }
     render() {
-        const availabilityTabEdgeInlineStart = (h("span", { key: '4f66f8149bd22a451ddc9e2849dfb06110d9bad9', class: "pds-tab-edge", role: "presentation" }));
-        const availabilityTabEdgeInlineEnd = (h("span", { key: '2a8e8c25af220803c4b75d29f31d6381475a12dd', class: "pds-tab-edge pds-tab-edge--end", role: "presentation" }));
-        return (h(Host, { key: '62b2ccf5e478fc50b41bd837979311c535c78412', variant: this.variant, slot: "tabs", index: this.index }, h("button", { key: 'e1b179b308791299b6d57441ea50f79da7bd8f21', role: "tab", id: this.parentComponentId + "__" + this.name, "aria-controls": this.parentComponentId + "__" + this.name + "-panel", tabindex: this.selected ? "0" : "-1", "aria-selected": this.selected ? "true" : "false", class: this.selected ? "pds-tab is-active" : "pds-tab", onClick: this.onTabClick.bind(this, this.index, this.parentComponentId) }, this.variant === "availability" && availabilityTabEdgeInlineStart, this.variant === "availability" && availabilityTabEdgeInlineEnd, h("div", { key: 'fcf7b2db11eaa6e8f0c97b96f925540678a3c864', class: "pds-tab__content" }, h("slot", { key: '2ee6ea6d01dc62bd177e9b8473602b9d5b2549b3' })))));
+        const availabilityTabEdgeInlineStart = (h("span", { key: 'f83448bc898dd4e94a7777d23c9565830dff0346', class: "pds-tab-edge", role: "presentation" }));
+        const availabilityTabEdgeInlineEnd = (h("span", { key: '5ff8d05f4cf140771706e7740c48e658208749dd', class: "pds-tab-edge pds-tab-edge--end", role: "presentation" }));
+        return (h(Host, { key: '874111fb5eedda9d021c8df0dc048aa771141a7c', variant: this.variant, slot: "tabs", index: this.index }, h("button", { key: 'a72dc4a32de38ae26bdba67cd91028dc955d4349', role: "tab", id: this.parentComponentId + "__" + this.name, "aria-controls": this.parentComponentId + "__" + this.name + "-panel", tabindex: this.selected ? "0" : "-1", "aria-selected": this.selected ? "true" : "false", class: this.selected ? "pds-tab is-active" : "pds-tab", onClick: this.onTabClick.bind(this, this.index, this.parentComponentId) }, this.variant === "availability" && availabilityTabEdgeInlineStart, this.variant === "availability" && availabilityTabEdgeInlineEnd, h("div", { key: '8e629e15312b7bd93c84d026b8b40f51a87479ca', class: "pds-tab__content" }, h("slot", { key: '2296b81a3abdd25cc9eb73d8fed5089466e21fc6' })))));
     }
     static get is() { return "pds-tab"; }
     static get originalStyleUrls() {

package/dist/collection/components/pds-tabs/pds-tabpanel/pds-tabpanel.js

@@ -8,7 +8,7 @@ export class PdsTabpanel {
         this.selected = false; // eslint-disable-line @stencil-community/strict-mutable
     }
     render() {
-        return (h(Host, { key: '0465e33b28555596cc4a891a63a99c49153f577d', slot: "tabpanels" }, h("div", { key: '8c2404f0aaee7dd7219552b51332d4194aa535ae', role: "tabpanel", id: this.parentComponentId + "__" + this.name + '-panel', tabindex: "0", "aria-labelledby": this.parentComponentId + "__" + this.name, class: this.selected ? "pds-tabpanel is-active" : "pds-tabpanel" }, h("slot", { key: 'f7f9dc2a755aa726b8e46d8641087a8fdb1a9e5e' }))));
+        return (h(Host, { key: '452260718e63155f0ce100b6d502b208fe0b8210', slot: "tabpanels" }, h("div", { key: 'dbf06166503b2890d827ac58f3481330f60edb5c', role: "tabpanel", id: this.parentComponentId + "__" + this.name + '-panel', tabindex: "0", "aria-labelledby": this.parentComponentId + "__" + this.name, class: this.selected ? "pds-tabpanel is-active" : "pds-tabpanel" }, h("slot", { key: '4785fa2a3781569b51e1947db5dd860b36e09ab5' }))));
     }
     static get is() { return "pds-tabpanel"; }
     static get originalStyleUrls() {

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

@@ -76,7 +76,7 @@ export class PdsTabs {
         this.passPropsToChildren();
     }
     render() {
-        return (h(Host, { key: '3b06654b1d2298a9cfa3fc42996ad72e80942ee4', "active-tab-name": this.activeTabName, class: this.classNames(), id: this.componentId }, h("div", { key: '529e1aa48f7fea4754dbe8a3d8f655eb297e1a9a', class: "pds-tabs__tablist", role: "tablist", "aria-label": this.tablistLabel }, h("slot", { key: 'cca3b75eec2a519e87878b39d8ca52a6c033dc4d', name: "tabs" })), h("slot", { key: 'caf5abcc85eee1e45e197a7ec792a873cdfb104b', name: "tabpanels" })));
+        return (h(Host, { key: 'e5b0d44fbe0df70a9260b5ce1ecabad9e5ce52da', "active-tab-name": this.activeTabName, class: this.classNames(), id: this.componentId }, h("div", { key: '4e987262ef8355b0a94f94ded397d72ccbb678f8', class: "pds-tabs__tablist", role: "tablist", "aria-label": this.tablistLabel }, h("slot", { key: 'f615e1d116f4c0f9ee28d172f64a05e755386ead', name: "tabs" })), h("slot", { key: 'f74280a78775d19fb1e94d522c28531d79ba73e3', name: "tabpanels" })));
     }
     static get is() { return "pds-tabs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -20,7 +20,7 @@ export class PdsText {
       ${this.weight !== undefined && this.weight.trim() !== '' ? `pds-text--weight-${this.weight}` : ''}
       ${this.decoration !== undefined && this.decoration.trim() !== '' ? `pds-text--decoration-${this.decoration}` : ''}
     `;
-        return (h(Tag, { key: '2b8a2f2aaafd342a7df51029213c82224774fd5f', style: this.color && setColor(this.color), class: typeClasses, part: "content" }, h("slot", { key: '8dd80aaec576c1e1ab152529f94732d6074c5542' })));
+        return (h(Tag, { key: '290b394545a5769f9d020922b31e14991148ebc7', style: this.color && setColor(this.color), class: typeClasses, part: "content" }, h("slot", { key: '0e64e2e05db073a5d0568f282acce4b9f06238cf' })));
     }
     static get is() { return "pds-text"; }
     static get encapsulation() { return "shadow"; }

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

@@ -77,4 +77,17 @@ label {
   color: var(--pine-color-text-message-danger);
   display: flex;
   gap: var(--pine-dimension-2xs);
+}
+
+.visually-hidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  clip-path: polygon(0 0, 0 0, 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
 }

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

@@ -66,7 +66,7 @@ export class PdsTextarea {
         };
     }
     /**
-     * Sets focus on the native `textarea` in the `pds-texarea`. Use this method instead of the global
+     * Sets focus on the native `textarea` in the `pds-textarea`. Use this method instead of the global
      * `textarea.focus()`.
      */
     async setFocus() {
@@ -185,10 +185,10 @@ export class PdsTextarea {
     }
     render() {
         const value = this.getValue();
-        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))));
+        return (h(Host, { key: 'a1a70451b8987a1d152c5e440a672267b3ee325e', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null }, h("div", { key: 'c28061e7848a58995c0883a99af04170bbdd2ba0', class: "pds-textarea" }, this.label &&
+            h("div", { key: '53bf7022550e51bc63decb0595c2e01c0bf7051c', class: "pds-textarea__label-wrapper" }, h("label", { key: 'ac1152cfb3f096a7861c6db9779f4bde3d117522', htmlFor: this.componentId }, h("span", { key: '0d664943f7fd9490879d0a8349743d535103608c', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), !this.hideLabel && this.renderAction()), h("textarea", Object.assign({ key: 'a7374006831ab8f0cda0a9b3bf999abc7485a16d', ref: (el) => this.nativeTextarea = el, "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, autocomplete: this.autocomplete, class: this.textareaClassNames(), disabled: this.disabled, id: this.componentId, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, rows: this.rows, onBlur: this.onBlur, onChange: this.onTextareaChange, onFocus: this.onFocus, onInput: this.onInput }, this.inheritedAttributes), value), this.helperMessage &&
+            h("p", { key: '4ca62e53a085acde9b8550c123ea1ee5a8723581', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
+            h("p", { key: 'f70e70f4588d0d9f1e7cc570bc5db1b6f6f27f0b', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: '7a91bdea1bd0ac2a477b41d6eec3dc6369119ab0', icon: danger, size: "small" }), this.errorMessage))));
     }
     static get is() { return "pds-textarea"; }
     static get encapsulation() { return "shadow"; }
@@ -365,6 +365,25 @@ export class PdsTextarea {
                 "attribute": "label",
                 "reflect": false
             },
+            "hideLabel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visually hides the label text for instances where only the textarea should be displayed. Label remains accessible to assistive technology such as screen readers.\nNote: When true, the action slot is also hidden to maintain a minimal UI."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "hide-label",
+                "reflect": false
+            },
             "name": {
                 "type": "string",
                 "mutable": false,
@@ -597,7 +616,7 @@ export class PdsTextarea {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Sets focus on the native `textarea` in the `pds-texarea`. Use this method instead of the global\n`textarea.focus()`.",
+                    "text": "Sets focus on the native `textarea` in the `pds-textarea`. Use this method instead of the global\n`textarea.focus()`.",
                     "tags": []
                 }
             }

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

@@ -1 +1 @@
-{"version":3,"file":"pds-textarea.js","sourceRoot":"","sources":["../../../src/components/pds-textarea/pds-textarea.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { assignDescription, isRequired, messageId } from '../../utils/form';\nimport { TextareaChangeEventDetail, TextareaInputEventDetail } from './textarea-interface';\nimport { debounceEvent } from '@utils/utils';\nimport type { Attributes } from '@utils/attributes';\nimport { inheritAttributes, inheritAriaAttributes } from '@utils/attributes';\nimport { danger } from '@pine-ds/icons/icons';\n\n/**\n * @slot action - Content to be displayed in the label area, typically for help icons or links\n */\n@Component({\n  tag: 'pds-textarea',\n  styleUrls: [\n    '../../global/styles/utils/label.scss',\n    '../pds-input/pds-input.tokens.scss',\n    'pds-textarea.scss'\n  ],\n  shadow: true,\n  formAssociated: true,\n})\nexport class PdsTextarea {\n\n  private nativeTextarea?: HTMLTextAreaElement\n  private focusedValue?: string | null;\n  private inheritedAttributes: Attributes = {};\n  private originalPdsInput?: EventEmitter<TextareaInputEventDetail>;\n  private internals?: ElementInternals;\n\n  @Element() el: HTMLPdsTextareaElement;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() pdsBlur!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the input has focus.\n   */\n  @Event() pdsFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when a keyboard input occurs.\n   *\n   * For elements that accept text input (`type=text`, `type=tel`, etc.), the interface\n   * is [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent); for others,\n   * the interface is [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event). If\n   * the input is cleared on edit, the type is `null`.\n   */\n  @Event() pdsInput: EventEmitter<TextareaInputEventDetail>;\n\n  /**\n   * Event emitted whenever the value of the textarea changes.\n   *\n   * This event will not emit when programmatically setting the `value` property.\n   */\n  @Event() pdsTextareaChange: EventEmitter<TextareaChangeEventDetail>;\n\n  /**\n   * Sets focus on the native `textarea` in the `pds-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"]}
+{"version":3,"file":"pds-textarea.js","sourceRoot":"","sources":["../../../src/components/pds-textarea/pds-textarea.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { assignDescription, isRequired, messageId } from '../../utils/form';\nimport { TextareaChangeEventDetail, TextareaInputEventDetail } from './textarea-interface';\nimport { debounceEvent } from '@utils/utils';\nimport type { Attributes } from '@utils/attributes';\nimport { inheritAttributes, inheritAriaAttributes } from '@utils/attributes';\nimport { danger } from '@pine-ds/icons/icons';\n\n/**\n * @slot action - Content to be displayed in the label area, typically for help icons or links\n */\n@Component({\n  tag: 'pds-textarea',\n  styleUrls: [\n    '../../global/styles/utils/label.scss',\n    '../pds-input/pds-input.tokens.scss',\n    'pds-textarea.scss'\n  ],\n  shadow: true,\n  formAssociated: true,\n})\nexport class PdsTextarea {\n\n  private nativeTextarea?: HTMLTextAreaElement\n  private focusedValue?: string | null;\n  private inheritedAttributes: Attributes = {};\n  private originalPdsInput?: EventEmitter<TextareaInputEventDetail>;\n  private internals?: ElementInternals;\n\n  @Element() el: HTMLPdsTextareaElement;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() pdsBlur!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the input has focus.\n   */\n  @Event() pdsFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when a keyboard input occurs.\n   *\n   * For elements that accept text input (`type=text`, `type=tel`, etc.), the interface\n   * is [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent); for others,\n   * the interface is [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event). If\n   * the input is cleared on edit, the type is `null`.\n   */\n  @Event() pdsInput: EventEmitter<TextareaInputEventDetail>;\n\n  /**\n   * Event emitted whenever the value of the textarea changes.\n   *\n   * This event will not emit when programmatically setting the `value` property.\n   */\n  @Event() pdsTextareaChange: EventEmitter<TextareaChangeEventDetail>;\n\n  /**\n   * Sets focus on the native `textarea` in the `pds-textarea`. Use this method instead of the global\n   * `textarea.focus()`.\n   */\n  @Method()\n  async setFocus() {\n    if (this.nativeTextarea) {\n      this.nativeTextarea.focus();\n    }\n  }\n\n  /**\n   * Specifies if and how the browser provides `autocomplete` assistance for the field.\n   */\n  @Prop() autocomplete: string;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Determines whether or not the textarea is disabled.\n   * @defaultValue false\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The amount of time, in milliseconds, to wait to trigger the event after each keystroke.\n   */\n  @Prop() debounce?: number;\n\n  /**\n   * Displays an error message below the textarea field.\n   */\n  @Prop() errorMessage?: string;\n\n  /**\n   * Displays a message or hint below the textarea field.\n   */\n  @Prop() helperMessage?: string;\n\n  /**\n   * Determines whether or not the textarea is invalid or throws an error.\n   * @defaultValue false\n   */\n  @Prop({mutable: true}) invalid = false;       // eslint-disable-line @stencil-community/strict-mutable\n\n  /**\n   * Text to be displayed as the textarea label.\n   */\n  @Prop() label?: string;\n\n  /**\n   * Visually hides the label text for instances where only the textarea should be displayed. Label remains accessible to assistive technology such as screen readers.\n   * Note: When true, the action slot is also hidden to maintain a minimal UI.\n   */\n  @Prop() hideLabel: boolean;\n\n  /**\n   * Specifies the name. Submitted with the form name/value pair. This value will mirror the componentId.\n   */\n  @Prop() name: string = this.componentId;\n\n  /**\n   * Specifies a short hint that describes the expected value of the textarea.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * Determines whether or not the textarea is readonly.\n   * @defaultValue false\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Determines whether or not the textarea is required.\n   * @defaultValue false\n   */\n  @Prop() required = false;\n\n  /**\n   * Sets number of rows of text visible without needing to scroll in the textarea.\n   */\n  @Prop() rows?: number;\n\n  /**\n   * The value of the textarea.\n   */\n  @Prop({mutable: true}) value?: string | null = '';\n\n  @State() hasFocus = false;\n\n  /**\n   * If true, the textarea has action content in the label area\n   */\n  @State() hasAction = false;\n\n  @Watch('debounce')\n  protected debounceChanged() {\n    const { pdsInput, debounce, originalPdsInput } = this;\n\n    this.pdsInput = debounce === undefined ? originalPdsInput ?? pdsInput : debounceEvent(pdsInput, debounce);\n  }\n\n  /**\n   * Update the native input element when the value changes\n   */\n  @Watch('value')\n  protected valueChanged() {\n    const nativeTextarea = this.nativeTextarea;\n    const value = this.getValue();\n\n    if (nativeTextarea && nativeTextarea.value !== value) {\n      nativeTextarea.value = value;\n    }\n\n    // Update form value for Form Associated Custom Elements API\n    this.updateFormValue();\n  }\n\n  /**\n   * Emits an `pdsInput` event.\n   */\n  private emitInputChange(event?: Event) {\n    const { value } = this;\n    this.pdsInput.emit({ value, event });\n  }\n\n  /**\n   * Emits an `pdsTextareaChange` event.\n   */\n  private emitValueChange(event?: Event) {\n    const textarea = event.target as HTMLTextAreaElement;\n    isRequired(textarea, this);\n\n    const { value } = textarea;\n\n    // Checks for both null and undefined values\n    const newValue = value == null ? value : value.toString();\n    this.focusedValue = newValue;\n    this.pdsTextareaChange.emit({ value: newValue, event });\n  }\n\n  private getValue(): string {\n    return this.value || '';\n  }\n\n  private onBlur = (ev: FocusEvent) => {\n    this.hasFocus = false;\n\n    if (this.focusedValue !== this.value) {\n      this.emitValueChange(ev);\n    }\n\n    this.pdsBlur.emit(ev);\n  };\n\n  private onFocus = (ev: FocusEvent) => {\n    this.hasFocus = true;\n    this.focusedValue = this.value;\n\n    this.pdsFocus.emit(ev);\n  };\n\n  private onInput = (ev: Event) => {\n    const input = ev.target as HTMLTextAreaElement | null;\n    if (input) {\n      this.value = input.value || '';\n    }\n    this.emitInputChange(ev);\n  };\n\n  private onTextareaChange = (ev: Event) => {\n    this.emitValueChange(ev);\n  };\n\n  private textareaClassNames() {\n    const classNames = ['pds-textarea__field'];\n\n    if (this.invalid && this.invalid === true) {\n      classNames.push('is-invalid');\n    }\n\n    return classNames.join('  ');\n  }\n\n  connectedCallback() {\n    this.debounceChanged();\n    // Initialize ElementInternals for form association\n    if (this.el.attachInternals) {\n      this.internals = this.el.attachInternals();\n    }\n  }\n\n  componentWillLoad() {\n    this.inheritedAttributes = {\n      ...inheritAriaAttributes(this.el),\n      ...inheritAttributes(this.el),\n    };\n    this.hasAction = this.el.querySelector('[slot=\"action\"]') !== null;\n  }\n\n  componentDidLoad() {\n    this.originalPdsInput = this.pdsInput;\n    // Set initial form value\n    this.updateFormValue();\n  }\n\n  private renderAction() {\n    const hasAction = this.el.querySelector('[slot=\"action\"]') !== null;\n    if (hasAction) {\n      return (\n        <div class=\"pds-textarea__action\" part=\"action\">\n          <slot name=\"action\"></slot>\n        </div>\n      );\n    }\n    return null;\n  }\n\n  /**\n   * Updates the form value using ElementInternals API\n   */\n  private updateFormValue() {\n    if (this.internals && this.internals.setFormValue) {\n      const value = this.getValue();\n      this.internals.setFormValue(value || null);\n\n      // Set validity based on native textarea validation\n      if (this.nativeTextarea && this.internals && this.internals.setValidity) {\n        this.internals.setValidity(\n          this.nativeTextarea.validity,\n          this.nativeTextarea.validationMessage,\n          this.nativeTextarea\n        );\n      }\n    }\n  }\n\n  /**\n   * Form Associated Custom Elements API: Called when the form is reset\n   */\n  formResetCallback() {\n    this.value = '';\n    this.updateFormValue();\n  }\n\n  /**\n   * Form Associated Custom Elements API: Called when the form is disabled\n   */\n  formDisabledCallback(disabled: boolean) {\n    this.disabled = disabled;\n  }\n\n  /**\n   * Form Associated Custom Elements API: Called to restore form state\n   */\n  formStateRestoreCallback(state: string | FormData | null) {\n    if (typeof state === 'string') {\n      this.value = state;\n    } else if (state instanceof FormData && this.name) {\n      // Extract value from FormData using the textarea's name\n      const value = state.get(this.name);\n      if (typeof value === 'string') {\n        this.value = value;\n      }\n    }\n  }\n\n  render() {\n    const value = this.getValue();\n\n    return (\n      <Host\n        aria-disabled={this.disabled ? 'true' : null}\n        aria-readonly={this.readonly ? 'true' : null}\n        has-action={this.hasAction && !this.hideLabel ? 'true' : null}\n      >\n        <div class=\"pds-textarea\">\n          {this.label &&\n            <div class=\"pds-textarea__label-wrapper\">\n              <label htmlFor={this.componentId}>\n                <span class={this.hideLabel ? 'visually-hidden' : ''}>\n                  {this.label}\n                </span>\n              </label>\n              {!this.hideLabel && this.renderAction()}\n            </div>\n          }\n          <textarea\n            ref={(el) => this.nativeTextarea = el }\n            aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n            aria-invalid={this.invalid ? \"true\" : undefined}\n            autocomplete={this.autocomplete}\n            class={this.textareaClassNames()}\n            disabled={this.disabled}\n            id={this.componentId}\n            name={this.name}\n            placeholder={this.placeholder}\n            readOnly={this.readonly}\n            required={this.required}\n            rows={this.rows}\n            onBlur={this.onBlur}\n            onChange={this.onTextareaChange}\n            onFocus={this.onFocus}\n            onInput={this.onInput}\n            {...this.inheritedAttributes}\n          >\n            {value}\n          </textarea>\n          {this.helperMessage &&\n            <p\n              class=\"pds-textarea__helper-message\"\n              id={messageId(this.componentId, 'helper')}\n            >\n              {this.helperMessage}\n            </p>\n          }\n          {this.invalid &&\n            <p\n              aria-live=\"assertive\"\n              class=\"pds-textarea__error-message\"\n              id={messageId(this.componentId, 'error')}\n            >\n              <pds-icon icon={danger} size=\"small\" />\n              {this.errorMessage}\n            </p>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"]}