@pine-ds/core 2.1.2 → 2.1.3

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

@@ -45,7 +45,7 @@ export class PdsTableRow {
         }
     }
     render() {
-        return (h(Host, { key: '510501e1d6c567394bfaba09ac44bb9455a169a1', class: this.classNames(), role: "row" }, this.tableRef && this.tableRef.selectable && (h("pds-table-cell", { key: '14105fd6283f92b9158138bc2da1623b24b7796f', part: this.tableRef.fixedColumn ? 'checkbox-cell' : '', class: this.tableRef.selectable ? 'has-checkbox' : '' }, h("pds-checkbox", { key: 'a70e4fb1a7a08d4126a63328fd75970b4a637f76', componentId: this.generateUniqueId(), onClick: this.handleClick, indeterminate: this.indeterminate, label: "Select Row", labelHidden: true, checked: this.isSelected }))), h("slot", { key: '5deb2da8405d0792a43531695ece38afe8fda9b4' })));
+        return (h(Host, { key: '9dceed18de8775f4356afec4bafe85b8e01d784d', class: this.classNames(), role: "row" }, this.tableRef && this.tableRef.selectable && (h("pds-table-cell", { key: 'a56e002c28377096430b6370744dc32726f578d3', part: this.tableRef.fixedColumn ? 'checkbox-cell' : '', class: this.tableRef.selectable ? 'has-checkbox' : '' }, h("pds-checkbox", { key: '5d7d6b2632d619bc7e7447f1eaf6ec7d9a2e2318', componentId: this.generateUniqueId(), onClick: this.handleClick, indeterminate: this.indeterminate, label: "Select Row", labelHidden: true, checked: this.isSelected }))), h("slot", { key: '9dcbe00aba5b4bba6318a301609ce2226c303178' })));
     }
     static get is() { return "pds-table-row"; }
     static get encapsulation() { return "shadow"; }
@@ -73,7 +73,7 @@ export class PdsTableRow {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Indicates that the selection state is indeterminate."
+                    "text": "Determines if the row selected is in an indeterminate state."
                 },
                 "attribute": "indeterminate",
                 "reflect": false
@@ -90,7 +90,7 @@ export class PdsTableRow {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "A local state to track whether the row is currently selected."
+                    "text": "Determines if the table row is currently selected."
                 },
                 "attribute": "is-selected",
                 "reflect": false

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

@@ -1 +1 @@
-{"version":3,"file":"pds-table-row.js","sourceRoot":"","sources":["../../../../src/components/pds-table/pds-table-row/pds-table-row.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, h, Event, EventEmitter, Prop } from '@stencil/core';\n\nimport { closest } from '../../../utils/closest';\n\n@Component({\n  tag: 'pds-table-row',\n  styleUrls: ['../../../global/styles/base.scss', 'pds-table-row.scss'],\n  shadow: true,\n})\nexport class PdsTableRow {\n  @Element() hostElement: HTMLPdsTableRowElement;\n  private tableRef: HTMLPdsTableElement;\n\n  /**\n   * Indicates that the selection state is indeterminate.\n   * */\n  @Prop({ mutable: true }) indeterminate?: boolean\n\n  /**\n   * A local state to track whether the row is currently selected.\n   */\n  @Prop({ mutable: true }) isSelected?: boolean;\n\n  /**\n   * Event that is emitted when the checkbox is clicked, carrying the selected value.\n   */\n  @Event() pdsTableRowSelected: EventEmitter<{ rowIndex: number; isSelected: boolean; }>;\n\n  private handleClick = () => {\n    this.isSelected = !this.isSelected; // Toggle the selected state\n    this.handleSelect(this.isSelected);\n  }\n\n  private handleSelect = (isSelected: boolean) => {\n    this.indeterminate = false;\n\n    if (!closest('pds-table-head', this.hostElement)) {\n      const rowIndex = Array.from(this.hostElement.parentNode.children).indexOf(this.hostElement)\n      this.pdsTableRowSelected.emit({\n        rowIndex,\n        isSelected,\n      })\n    }\n  }\n\n  private classNames() {\n    const classNames = [];\n\n    if (this.isSelected) {\n      classNames.push(\"is-selected\");\n    }\n\n    return classNames.join('  ');\n  }\n\n  componentWillRender() {\n    this.tableRef = this.hostElement.closest('pds-table') as HTMLPdsTableElement;\n\n    if (this.tableRef && this.tableRef.fixedColumn) {\n      const tableCell = this.hostElement.querySelector('pds-table-cell');\n      tableCell?.classList.add(\"is-fixed\");\n    }\n  }\n\n  componentWillLoad() {\n    if (this.isSelected) {\n      this.handleSelect(this.isSelected);\n    }\n  }\n\n  private generateUniqueId = () => {\n    const randomString = Math.random().toString(36).substring(2, 8);\n    const timestamp = new Date().toISOString().replace(/[:.]/g, '-');\n    const uniqueId = `${randomString}-${timestamp}`;\n\n    return uniqueId;\n  }\n\n  render() {\n    return (\n      <Host\n        class={this.classNames()}\n        role=\"row\"\n      >\n        {this.tableRef && this.tableRef.selectable && (\n          <pds-table-cell part={this.tableRef.fixedColumn ? 'checkbox-cell' : ''} class={this.tableRef.selectable ? 'has-checkbox' : ''} >\n            <pds-checkbox\n              componentId={this.generateUniqueId()}\n              onClick={this.handleClick}\n              indeterminate={this.indeterminate}\n              label={\"Select Row\"}\n              labelHidden={true}\n              checked={this.isSelected}\n            />\n          </pds-table-cell>\n        )}\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pds-table-row.js","sourceRoot":"","sources":["../../../../src/components/pds-table/pds-table-row/pds-table-row.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,IAAI,EAAE,MAAM,eAAe,CAAC;AAEvF,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAOjD,MAAM,OAAO,WAAW;;QAmBd,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,4BAA4B;YAChE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACrC,CAAC,CAAA;QAEO,iBAAY,GAAG,CAAC,UAAmB,EAAE,EAAE;YAC7C,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;YAE3B,IAAI,CAAC,OAAO,CAAC,gBAAgB,EAAE,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC;gBACjD,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA;gBAC3F,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC;oBAC5B,QAAQ;oBACR,UAAU;iBACX,CAAC,CAAA;YACJ,CAAC;QACH,CAAC,CAAA;QA2BO,qBAAgB,GAAG,GAAG,EAAE;YAC9B,MAAM,YAAY,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;YAChE,MAAM,SAAS,GAAG,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;YACjE,MAAM,QAAQ,GAAG,GAAG,YAAY,IAAI,SAAS,EAAE,CAAC;YAEhD,OAAO,QAAQ,CAAC;QAClB,CAAC,CAAA;;;;IA/BO,UAAU;QAChB,MAAM,UAAU,GAAG,EAAE,CAAC;QAEtB,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QACjC,CAAC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC;IAED,mBAAmB;QACjB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,WAAW,CAAwB,CAAC;QAE7E,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC;YAC/C,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;YACnE,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;QACvC,CAAC;IACH,CAAC;IAED,iBAAiB;QACf,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACrC,CAAC;IACH,CAAC;IAUD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EACxB,IAAI,EAAC,KAAK;YAET,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,UAAU,IAAI,CAC5C,uEAAgB,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE;gBAC3H,qEACE,WAAW,EAAE,IAAI,CAAC,gBAAgB,EAAE,EACpC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,KAAK,EAAE,YAAY,EACnB,WAAW,EAAE,IAAI,EACjB,OAAO,EAAE,IAAI,CAAC,UAAU,GACxB,CACa,CAClB;YACD,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, h, Event, EventEmitter, Prop } from '@stencil/core';\n\nimport { closest } from '../../../utils/closest';\n\n@Component({\n  tag: 'pds-table-row',\n  styleUrls: ['../../../global/styles/base.scss', 'pds-table-row.scss'],\n  shadow: true,\n})\nexport class PdsTableRow {\n  @Element() hostElement: HTMLPdsTableRowElement;\n  private tableRef: HTMLPdsTableElement;\n\n  /**\n    * Determines if the row selected is in an indeterminate state.\n    */\n  @Prop({ mutable: true }) indeterminate?: boolean;\n\n  /**\n   * Determines if the table row is currently selected.\n   */\n  @Prop({ mutable: true }) isSelected?: boolean;\n\n  /**\n   * Event that is emitted when the checkbox is clicked, carrying the selected value.\n   */\n  @Event() pdsTableRowSelected: EventEmitter<{ rowIndex: number; isSelected: boolean; }>;\n\n  private handleClick = () => {\n    this.isSelected = !this.isSelected; // Toggle the selected state\n    this.handleSelect(this.isSelected);\n  }\n\n  private handleSelect = (isSelected: boolean) => {\n    this.indeterminate = false;\n\n    if (!closest('pds-table-head', this.hostElement)) {\n      const rowIndex = Array.from(this.hostElement.parentNode.children).indexOf(this.hostElement)\n      this.pdsTableRowSelected.emit({\n        rowIndex,\n        isSelected,\n      })\n    }\n  }\n\n  private classNames() {\n    const classNames = [];\n\n    if (this.isSelected) {\n      classNames.push(\"is-selected\");\n    }\n\n    return classNames.join('  ');\n  }\n\n  componentWillRender() {\n    this.tableRef = this.hostElement.closest('pds-table') as HTMLPdsTableElement;\n\n    if (this.tableRef && this.tableRef.fixedColumn) {\n      const tableCell = this.hostElement.querySelector('pds-table-cell');\n      tableCell?.classList.add(\"is-fixed\");\n    }\n  }\n\n  componentWillLoad() {\n    if (this.isSelected) {\n      this.handleSelect(this.isSelected);\n    }\n  }\n\n  private generateUniqueId = () => {\n    const randomString = Math.random().toString(36).substring(2, 8);\n    const timestamp = new Date().toISOString().replace(/[:.]/g, '-');\n    const uniqueId = `${randomString}-${timestamp}`;\n\n    return uniqueId;\n  }\n\n  render() {\n    return (\n      <Host\n        class={this.classNames()}\n        role=\"row\"\n      >\n        {this.tableRef && this.tableRef.selectable && (\n          <pds-table-cell part={this.tableRef.fixedColumn ? 'checkbox-cell' : ''} class={this.tableRef.selectable ? 'has-checkbox' : ''} >\n            <pds-checkbox\n              componentId={this.generateUniqueId()}\n              onClick={this.handleClick}\n              indeterminate={this.indeterminate}\n              label={\"Select Row\"}\n              labelHidden={true}\n              checked={this.isSelected}\n            />\n          </pds-table-cell>\n        )}\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -80,7 +80,7 @@ export class PdsTable {
         headerCheckbox.indeterminate = !allSelectedRows && !noneSelectedRows;
     }
     render() {
-        return (h(Host, { key: 'b7cdce58b3d301540458b9d6763373be0f253346', class: this.classNames(), id: this.componentId, role: "grid", selectable: this.selectable, tabindex: "0" }, h("slot", { key: '780c60ee86ff522719a837b3c8f2a6e47fa00094' })));
+        return (h(Host, { key: '1525beac2ebdb255e34f834c57755f3bb7e0735b', class: this.classNames(), id: this.componentId, role: "grid", selectable: this.selectable, tabindex: "0" }, h("slot", { key: '2e04d93fe72d2d91ab80037ec42d805f8b472a0f' })));
     }
     static get is() { return "pds-table"; }
     static get encapsulation() { return "shadow"; }
@@ -108,7 +108,7 @@ export class PdsTable {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Determines if table displays compact which reduces the spacing of table cells."
+                    "text": "Determines if the table displays with reduced table cell padding."
                 },
                 "attribute": "compact",
                 "reflect": false
@@ -159,7 +159,7 @@ export class PdsTable {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Determines if table displays fixed column which fixes the first column of the table."
+                    "text": "Determines if the should display a fixed first column."
                 },
                 "attribute": "fixed-column",
                 "reflect": false
@@ -176,7 +176,7 @@ export class PdsTable {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Determines if table displays checkboxes for selectable rows."
+                    "text": "Determines if the table displays checkboxes for selectable rows."
                 },
                 "attribute": "selectable",
                 "reflect": false

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: ['../../global/styles/base.scss', 'pds-table.scss'],\n  shadow: true,\n})\nexport class PdsTable {\n  @Element() el: HTMLPdsTableElement;\n\n  /**\n   * Determines if table displays compact which reduces the spacing of table cells.\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 table displays fixed column which fixes the first column of the table.\n   */\n  @Prop() fixedColumn: boolean;\n\n  /**\n   * Determines if table displays checkboxes for selectable rows.\n   */\n  @Prop() selectable: boolean;\n\n  @State() sortingColumn: string | null = null;\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: ['../../global/styles/base.scss', '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"]}

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

@@ -8,7 +8,7 @@ export default {
   decorators: [withActions],
   parameters: {
     actions: {
-      handles: ['onclick', 'pdsTableRowSelected', 'onclick', 'pdsTableSelectAll'],
+      handles: ['onclick', 'pdsTableRowSelected', 'onclick', 'pdsTableSelectAll', 'pdsTableSort'],
     },
   },
   title: 'components/Table',

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

@@ -34,10 +34,10 @@ export class PdsTextarea {
         return classNames.join('  ');
     }
     render() {
-        return (h(Host, { key: 'd3cec920aa6de1d10734cf532441b7cd33262f03', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: '66865515eeeb7c68887135e82a4d99e0f63011ca', class: "pds-textarea" }, this.label &&
-            h(PdsLabel, { key: '390b6073cc628fba80754e27785045b927559406', htmlFor: this.componentId, text: this.label }), h("textarea", { key: '6a9232804406c1a92ea1a4b792c69f2c116728b8', "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, onChange: this.onTextareaChange }, this.value), this.helperMessage &&
-            h("p", { key: '066c5533e0f18c1536bd05aecca1e0ed82a7a115', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
-            h("p", { key: 'bb18f8d1f229e48b6039244559a06b0de607f582', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: 'f619f844ca95981f6986a1f29f1a60774c4281f5', icon: danger, size: "small" }), this.errorMessage))));
+        return (h(Host, { key: '461039704016b1b3858af80440863f1fc4930ceb', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: 'de68ba7ca3b6714e1da8594e76f60bab2a3de1fb', class: "pds-textarea" }, this.label &&
+            h(PdsLabel, { key: '102802b8244a929492731700fdde06a053f3e2d5', htmlFor: this.componentId, text: this.label }), h("textarea", { key: '55a3fde040749bd03a5e681dafad7db0717f4a7f', "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, onChange: this.onTextareaChange }, this.value), this.helperMessage &&
+            h("p", { key: '552e0c1240cdc51c215f5ddfc51f250156d8a4b2', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
+            h("p", { key: 'a7e6f4a0d926203f5ac56a8f99d03fd9b5f3647b', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: '53a40e204e076147b27c921cdbe54336ca50d9e3', icon: danger, size: "small" }), this.errorMessage))));
     }
     static get is() { return "pds-textarea"; }
     static get encapsulation() { return "shadow"; }
@@ -102,7 +102,7 @@ export class PdsTextarea {
                             "name": "defaultValue",
                             "text": "false"
                         }],
-                    "text": "Indicates whether or not the textarea is disabled"
+                    "text": "Determines whether or not the textarea is disabled."
                 },
                 "attribute": "disabled",
                 "reflect": false,
@@ -120,7 +120,7 @@ export class PdsTextarea {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Specifies the error text and provides an error-themed treatment to the field"
+                    "text": "Displays an error message below the textarea field."
                 },
                 "attribute": "error-message",
                 "reflect": false
@@ -137,7 +137,7 @@ export class PdsTextarea {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Displays a hint or description of the textarea"
+                    "text": "Displays a message or hint below the textarea field."
                 },
                 "attribute": "helper-message",
                 "reflect": false
@@ -157,7 +157,7 @@ export class PdsTextarea {
                             "name": "defaultValue",
                             "text": "false"
                         }],
-                    "text": "Indicates whether or not the textarea is invalid or throws an error"
+                    "text": "Determines whether or not the textarea is invalid or throws an error."
                 },
                 "attribute": "invalid",
                 "reflect": false,
@@ -175,7 +175,7 @@ export class PdsTextarea {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Text to be displayed as the textarea label"
+                    "text": "Text to be displayed as the textarea label."
                 },
                 "attribute": "label",
                 "reflect": false
@@ -192,7 +192,7 @@ export class PdsTextarea {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Specifies the name, submitted with the form name/value pair. This value will mirror the componentId"
+                    "text": "Specifies the name. Submitted with the form name/value pair. This value will mirror the componentId."
                 },
                 "attribute": "name",
                 "reflect": false,
@@ -210,7 +210,7 @@ export class PdsTextarea {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Specifies a short hint that describes the expected value of the textarea"
+                    "text": "Specifies a short hint that describes the expected value of the textarea."
                 },
                 "attribute": "placeholder",
                 "reflect": false
@@ -230,7 +230,7 @@ export class PdsTextarea {
                             "name": "defaultValue",
                             "text": "false"
                         }],
-                    "text": "Indicates whether or not the textarea is readonly"
+                    "text": "Determines whether or not the textarea is readonly."
                 },
                 "attribute": "readonly",
                 "reflect": false,
@@ -251,7 +251,7 @@ export class PdsTextarea {
                             "name": "defaultValue",
                             "text": "false"
                         }],
-                    "text": "Indicates whether or not the textarea is required"
+                    "text": "Determines whether or not the textarea is required."
                 },
                 "attribute": "required",
                 "reflect": false,
@@ -269,7 +269,7 @@ export class PdsTextarea {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Sets number of rows of text visible without needing to scroll in the textarea"
+                    "text": "Sets number of rows of text visible without needing to scroll in the textarea."
                 },
                 "attribute": "rows",
                 "reflect": false
@@ -286,7 +286,7 @@ export class PdsTextarea {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The value of the textarea"
+                    "text": "The value of the textarea."
                 },
                 "attribute": "value",
                 "reflect": false
@@ -302,7 +302,7 @@ export class PdsTextarea {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Event emitted whenever the value of the textarea changes"
+                    "text": "Event emitted whenever the value of the textarea changes."
                 },
                 "complexType": {
                     "original": "TextareaChangeEventDetail",

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, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { assignDescription, isRequired, messageId } from '../../utils/form';\nimport { TextareaChangeEventDetail } from './textarea-interface';\nimport { PdsLabel } from '../_internal/pds-label/pds-label';\nimport { danger } from '@pine-ds/icons/icons';\n\n@Component({\n  tag: 'pds-textarea',\n  styleUrls: ['../../global/styles/base.scss', 'pds-textarea.scss'],\n  shadow: true,\n})\nexport class PdsTextarea {\n  @Element() el: HTMLPdsTextareaElement;\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 textarea is disabled\n   * @defaultValue false\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Specifies the error text and provides an error-themed treatment to the field\n   */\n  @Prop() errorMessage?: string;\n\n  /**\n   * Displays a hint or description of the textarea\n   */\n  @Prop() helperMessage?: string;\n\n  /**\n   * Indicates 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   * Indicates whether or not the textarea is readonly\n   * @defaultValue false\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Indicates 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;\n\n  /**\n   * Event emitted whenever the value of the textarea changes\n   */\n  @Event() pdsTextareaChange: EventEmitter<TextareaChangeEventDetail>;\n\n  private onTextareaChange = (ev: Event) => {\n    const textarea = ev.target as HTMLTextAreaElement;\n    isRequired(textarea, this);\n\n    if (textarea) {\n      this.value = textarea.value;\n    }\n\n    this.pdsTextareaChange.emit({value: this.value, event: 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  render() {\n    return (\n      <Host\n        aria-disabled={this.disabled ? 'true' : null}\n      >\n        <div class=\"pds-textarea\">\n          {this.label &&\n            <PdsLabel htmlFor={this.componentId} text={this.label} />\n          }\n          <textarea\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            onChange={this.onTextareaChange}\n          >{this.value}</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, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { assignDescription, isRequired, messageId } from '../../utils/form';\nimport { TextareaChangeEventDetail } from './textarea-interface';\nimport { PdsLabel } from '../_internal/pds-label/pds-label';\nimport { danger } from '@pine-ds/icons/icons';\n\n@Component({\n  tag: 'pds-textarea',\n  styleUrls: ['../../global/styles/base.scss', 'pds-textarea.scss'],\n  shadow: true,\n})\nexport class PdsTextarea {\n  @Element() el: HTMLPdsTextareaElement;\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   * 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;\n\n  /**\n   * Event emitted whenever the value of the textarea changes.\n   */\n  @Event() pdsTextareaChange: EventEmitter<TextareaChangeEventDetail>;\n\n  private onTextareaChange = (ev: Event) => {\n    const textarea = ev.target as HTMLTextAreaElement;\n    isRequired(textarea, this);\n\n    if (textarea) {\n      this.value = textarea.value;\n    }\n\n    this.pdsTextareaChange.emit({value: this.value, event: 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  render() {\n    return (\n      <Host\n        aria-disabled={this.disabled ? 'true' : null}\n      >\n        <div class=\"pds-textarea\">\n          {this.label &&\n            <PdsLabel htmlFor={this.componentId} text={this.label} />\n          }\n          <textarea\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            onChange={this.onTextareaChange}\n          >{this.value}</textarea>\n          {this.helperMessage &&\n            <p\n              class=\"pds-textarea__helper-message\"\n              id={messageId(this.componentId, 'helper')}\n            >\n              {this.helperMessage}\n            </p>\n          }\n          {this.invalid &&\n            <p\n              aria-live=\"assertive\"\n              class=\"pds-textarea__error-message\"\n              id={messageId(this.componentId, 'error')}\n            >\n              <pds-icon icon={danger} size=\"small\" />\n              {this.errorMessage}\n            </p>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2024-12-13T19:35:22",
+  "timestamp": "2025-01-14T18:20:12",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.22.2",
@@ -1858,15 +1858,15 @@
       "docsTags": [
         {
           "name": "part",
-          "text": "button - The main button element that represents the button component."
+          "text": "button - Exposes the button element for styling."
         },
         {
           "name": "part",
-          "text": "caret - The caret icon element that appears when the button variant is 'disclosure'."
+          "text": "caret - Exposes the caret icon component for styling. Appears only on the disclosure variant."
         },
         {
           "name": "part",
-          "text": "icon - The icon element that appears before the text in the button, if provided."
+          "text": "icon - Exposes the icon component for styling."
         }
       ],
       "usage": {},
@@ -1903,7 +1903,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "Toggles disabled state of button",
+          "docs": "Determines the button's disabled state.",
           "docsTags": [
             {
               "name": "defaultValue",
@@ -1930,8 +1930,13 @@
           "mutable": false,
           "attr": "icon",
           "reflectToAttr": false,
-          "docs": "Displays icon before text when icon string matches an icon name",
-          "docsTags": [],
+          "docs": "Displays an icon before the text when\nthe icon string matches an icon name.",
+          "docsTags": [
+            {
+              "name": "defaultValue",
+              "text": "null"
+            }
+          ],
           "default": "null",
           "values": [
             {
@@ -1952,7 +1957,7 @@
           "mutable": false,
           "attr": "name",
           "reflectToAttr": false,
-          "docs": "Provides button with a submittable name",
+          "docs": "Provides the button with a submittable name.",
           "docsTags": [],
           "values": [
             {
@@ -1973,7 +1978,7 @@
           "mutable": false,
           "attr": "type",
           "reflectToAttr": false,
-          "docs": "Provides button with a type",
+          "docs": "Provides button with a type.",
           "docsTags": [
             {
               "name": "defaultValue",
@@ -2030,8 +2035,13 @@
           "mutable": false,
           "attr": "variant",
           "reflectToAttr": false,
-          "docs": "Sets button variant styles as outlined in Figma documentation",
-          "docsTags": [],
+          "docs": "Sets the style variant of the button.",
+          "docsTags": [
+            {
+              "name": "defaultValue",
+              "text": "primary"
+            }
+          ],
           "default": "'primary'",
           "values": [
             {
@@ -2086,15 +2096,15 @@
       "parts": [
         {
           "name": "button",
-          "docs": "The main button element that represents the button component."
+          "docs": "Exposes the button element for styling."
         },
         {
           "name": "caret",
-          "docs": "The caret icon element that appears when the button variant is 'disclosure'."
+          "docs": "Exposes the caret icon component for styling. Appears only on the disclosure variant."
         },
         {
           "name": "icon",
-          "docs": "The icon element that appears before the text in the button, if provided."
+          "docs": "Exposes the icon component for styling."
         }
       ],
       "dependents": [
@@ -3218,7 +3228,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "Indicates whether or not the input field is disabled.",
+          "docs": "Determines whether or not the input field is disabled.",
           "docsTags": [],
           "values": [
             {
@@ -3281,7 +3291,7 @@
           "mutable": false,
           "attr": "invalid",
           "reflectToAttr": false,
-          "docs": "Indicates whether or not the input field is invalid or throws an error.",
+          "docs": "Determines whether or not the input field is invalid or throws an error.",
           "docsTags": [],
           "values": [
             {
@@ -3365,7 +3375,7 @@
           "mutable": false,
           "attr": "readonly",
           "reflectToAttr": false,
-          "docs": "Indicates whether or not the input field is readonly.",
+          "docs": "Determines whether or not the input field is readonly.",
           "docsTags": [],
           "values": [
             {
@@ -3386,7 +3396,7 @@
           "mutable": false,
           "attr": "required",
           "reflectToAttr": false,
-          "docs": "Indicates whether or not the input field is required.",
+          "docs": "Determines whether or not the input field is required.",
           "docsTags": [],
           "values": [
             {
@@ -3463,7 +3473,7 @@
           },
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when a keyboard input occurred.",
+          "docs": "Emitted when a keyboard input occurs.",
           "docsTags": []
         }
       ],
@@ -5582,7 +5592,7 @@
           "mutable": false,
           "attr": "compact",
           "reflectToAttr": false,
-          "docs": "Determines if table displays compact which reduces the spacing of table cells.",
+          "docs": "Determines if the table displays with reduced table cell padding.",
           "docsTags": [],
           "values": [
             {
@@ -5624,7 +5634,7 @@
           "mutable": false,
           "attr": "fixed-column",
           "reflectToAttr": false,
-          "docs": "Determines if table displays fixed column which fixes the first column of the table.",
+          "docs": "Determines if the should display a fixed first column.",
           "docsTags": [],
           "values": [
             {
@@ -5666,7 +5676,7 @@
           "mutable": false,
           "attr": "selectable",
           "reflectToAttr": false,
-          "docs": "Determines if table displays checkboxes for selectable rows.",
+          "docs": "Determines if the table displays checkboxes for selectable rows.",
           "docsTags": [],
           "values": [
             {
@@ -5818,7 +5828,7 @@
           "mutable": true,
           "attr": "indeterminate",
           "reflectToAttr": false,
-          "docs": "Indicates that the selection state is indeterminate.",
+          "docs": "Determines if the select all checkbox is in an indeterminate state.",
           "docsTags": [],
           "values": [
             {
@@ -5839,8 +5849,13 @@
           "mutable": true,
           "attr": "is-selected",
           "reflectToAttr": false,
-          "docs": "A local state to track whether the row is currently selected.",
-          "docsTags": [],
+          "docs": "Determines if the table row is currently selected.",
+          "docsTags": [
+            {
+              "name": "defaultValue",
+              "text": "false"
+            }
+          ],
           "values": [
             {
               "type": "boolean"
@@ -5976,7 +5991,7 @@
           "mutable": true,
           "attr": "indeterminate",
           "reflectToAttr": false,
-          "docs": "Indicates that the selection state is indeterminate.",
+          "docs": "Determines if the row selected is in an indeterminate state.",
           "docsTags": [],
           "values": [
             {
@@ -5997,7 +6012,7 @@
           "mutable": true,
           "attr": "is-selected",
           "reflectToAttr": false,
-          "docs": "A local state to track whether the row is currently selected.",
+          "docs": "Determines if the table row is currently selected.",
           "docsTags": [],
           "values": [
             {
@@ -6602,7 +6617,7 @@
           "mutable": false,
           "attr": "disabled",
           "reflectToAttr": false,
-          "docs": "Indicates whether or not the textarea is disabled",
+          "docs": "Determines whether or not the textarea is disabled.",
           "docsTags": [
             {
               "name": "defaultValue",
@@ -6629,7 +6644,7 @@
           "mutable": false,
           "attr": "error-message",
           "reflectToAttr": false,
-          "docs": "Specifies the error text and provides an error-themed treatment to the field",
+          "docs": "Displays an error message below the textarea field.",
           "docsTags": [],
           "values": [
             {
@@ -6650,7 +6665,7 @@
           "mutable": false,
           "attr": "helper-message",
           "reflectToAttr": false,
-          "docs": "Displays a hint or description of the textarea",
+          "docs": "Displays a message or hint below the textarea field.",
           "docsTags": [],
           "values": [
             {
@@ -6671,7 +6686,7 @@
           "mutable": true,
           "attr": "invalid",
           "reflectToAttr": false,
-          "docs": "Indicates whether or not the textarea is invalid or throws an error",
+          "docs": "Determines whether or not the textarea is invalid or throws an error.",
           "docsTags": [
             {
               "name": "defaultValue",
@@ -6698,7 +6713,7 @@
           "mutable": false,
           "attr": "label",
           "reflectToAttr": false,
-          "docs": "Text to be displayed as the textarea label",
+          "docs": "Text to be displayed as the textarea label.",
           "docsTags": [],
           "values": [
             {
@@ -6719,7 +6734,7 @@
           "mutable": false,
           "attr": "name",
           "reflectToAttr": false,
-          "docs": "Specifies the name, submitted with the form name/value pair. This value will mirror the componentId",
+          "docs": "Specifies the name. Submitted with the form name/value pair. This value will mirror the componentId.",
           "docsTags": [],
           "default": "this.componentId",
           "values": [
@@ -6741,7 +6756,7 @@
           "mutable": false,
           "attr": "placeholder",
           "reflectToAttr": false,
-          "docs": "Specifies a short hint that describes the expected value of the textarea",
+          "docs": "Specifies a short hint that describes the expected value of the textarea.",
           "docsTags": [],
           "values": [
             {
@@ -6762,7 +6777,7 @@
           "mutable": false,
           "attr": "readonly",
           "reflectToAttr": false,
-          "docs": "Indicates whether or not the textarea is readonly",
+          "docs": "Determines whether or not the textarea is readonly.",
           "docsTags": [
             {
               "name": "defaultValue",
@@ -6789,7 +6804,7 @@
           "mutable": false,
           "attr": "required",
           "reflectToAttr": false,
-          "docs": "Indicates whether or not the textarea is required",
+          "docs": "Determines whether or not the textarea is required.",
           "docsTags": [
             {
               "name": "defaultValue",
@@ -6816,7 +6831,7 @@
           "mutable": false,
           "attr": "rows",
           "reflectToAttr": false,
-          "docs": "Sets number of rows of text visible without needing to scroll in the textarea",
+          "docs": "Sets number of rows of text visible without needing to scroll in the textarea.",
           "docsTags": [],
           "values": [
             {
@@ -6837,7 +6852,7 @@
           "mutable": true,
           "attr": "value",
           "reflectToAttr": false,
-          "docs": "The value of the textarea",
+          "docs": "The value of the textarea.",
           "docsTags": [],
           "values": [
             {
@@ -6867,7 +6882,7 @@
           },
           "cancelable": true,
           "composed": true,
-          "docs": "Event emitted whenever the value of the textarea changes",
+          "docs": "Event emitted whenever the value of the textarea changes.",
           "docsTags": []
         }
       ],