@pine-ds/core 1.0.1 → 1.0.2

package/components/pds-table-row.js

@@ -0,0 +1,78 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$3 } from './pds-checkbox2.js';
+import { d as defineCustomElement$2 } from './pds-table-cell2.js';
+
+const pdsTableRowCss = ":host{--color-background-fixed:var(--pine-color-white);--color-background-interactive:var(--pine-color-grey-200);border-color:inherit;display:table-row;vertical-align:inherit}:host::part(checkbox-cell){background-color:var(--color-background-fixed);left:0;position:-webkit-sticky;position:sticky;z-index:1}:host(:hover),:host(:hover)::part(checkbox-cell),:host(:hover) ::slotted(pds-table-cell),:host(.is-selected),:host(.is-selected)::part(checkbox-cell),:host(.is-selected) ::slotted(pds-table-cell){background:var(--color-background-interactive)}";
+const PdsTableRowStyle0 = pdsTableRowCss;
+
+const PdsTableRow$1 = /*@__PURE__*/ proxyCustomElement(class PdsTableRow extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.pdsTableRowSelected = createEvent(this, "pdsTableRowSelected", 7);
+        this.handleCheckboxClick = () => {
+            this.isSelected = !this.isSelected; // Toggle the selected state
+            const selectedIndex = Array.from(this.hostElement.parentNode.children).indexOf(this.hostElement);
+            this.pdsTableRowSelected.emit({ rowIndex: selectedIndex, isSelected: this.isSelected });
+        };
+        this.generateUniqueId = () => {
+            const randomString = Math.random().toString(36).substring(2, 8);
+            const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
+            const uniqueId = `${randomString}-${timestamp}`;
+            return uniqueId;
+        };
+        this.isSelected = false;
+    }
+    classNames() {
+        const classNames = [];
+        if (this.isSelected) {
+            classNames.push("is-selected");
+        }
+        return classNames.join('  ');
+    }
+    componentWillRender() {
+        this.tableRef = this.hostElement.closest('pds-table');
+        if (this.tableRef && this.tableRef.fixedColumn) {
+            const tableCell = this.hostElement.querySelector('pds-table-cell');
+            tableCell === null || tableCell === void 0 ? void 0 : tableCell.classList.add("is-fixed");
+        }
+    }
+    render() {
+        return (h(Host, { key: '9ef478c127a101b918e3e444109a0a3b72d809d6', class: this.classNames(), role: "row" }, this.tableRef && this.tableRef.selectable && (h("pds-table-cell", { key: 'f7ecba3776fe1a5606ea66bc43f495e03635803f', part: this.tableRef.fixedColumn ? 'checkbox-cell' : '', class: this.tableRef.selectable ? 'has-checkbox' : '' }, h("pds-checkbox", { key: '6e4ebaa953542cb476f141818375b3ba8b490b2c', componentId: this.generateUniqueId(), onClick: this.handleCheckboxClick, label: "Select Row", labelHidden: true, checked: this.isSelected }))), h("slot", { key: '4ccbd6b1a81d420dec05acb4f7a404ee670959b3' })));
+    }
+    get hostElement() { return this; }
+    static get style() { return PdsTableRowStyle0; }
+}, [1, "pds-table-row", {
+        "isSelected": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["pds-table-row", "pds-checkbox", "pds-table-cell"];
+    components.forEach(tagName => { switch (tagName) {
+        case "pds-table-row":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PdsTableRow$1);
+            }
+            break;
+        case "pds-checkbox":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "pds-table-cell":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const PdsTableRow = PdsTableRow$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PdsTableRow, defineCustomElement };
+
+//# sourceMappingURL=pds-table-row.js.map

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

@@ -0,0 +1 @@
+{"file":"pds-table-row.js","mappings":";;;;AAAA,MAAM,cAAc,GAAG,uiBAAuiB,CAAC;AAC/jB,0BAAe,cAAc;;MCMhBA,aAAW;;;;;;QAcd,wBAAmB,GAAG;YAC5B,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC;YACnC,MAAM,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YACjG,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,aAAa,EAAE,UAAU,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC;SACzF,CAAA;QAqBO,qBAAgB,GAAG;YACzB,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;SACjB,CAAA;0BAjC8B,KAAK;;IAQ5B,UAAU;QAChB,MAAM,UAAU,GAAG,EAAE,CAAC;QAEtB,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;SAChC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC9B;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;YAC9C,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;SACtC;KACF;IAUD,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EACxB,IAAI,EAAC,KAAK,IAET,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,UAAU,KACxC,uEAAgB,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,WAAW,GAAG,eAAe,GAAG,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,UAAU,GAAG,cAAc,GAAG,EAAE,IAC3H,qEACE,WAAW,EAAE,IAAI,CAAC,gBAAgB,EAAE,EACpC,OAAO,EAAE,IAAI,CAAC,mBAAmB,EACjC,KAAK,EAAE,YAAY,EACnB,WAAW,EAAE,IAAI,EACjB,OAAO,EAAE,IAAI,CAAC,UAAU,GACxB,CACa,CAClB,EACD,8DAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PdsTableRow"],"sources":["src/components/pds-table/pds-table-row/pds-table-row.scss?tag=pds-table-row&encapsulation=shadow","src/components/pds-table/pds-table-row/pds-table-row.tsx"],"sourcesContent":[":host {\n  --color-background-fixed: var(--pine-color-white);\n  --color-background-interactive: var(--pine-color-grey-200);\n\n  border-color: inherit;\n  display: table-row;\n  vertical-align: inherit;\n\n  // used for pds-checkbox-cell\n  // because it is in the ShadowDom\n  &::part(checkbox-cell) {\n    background-color: var(--color-background-fixed);\n    left: 0;\n    position: sticky;\n    z-index: 1;\n  }\n}\n\n:host(:hover),\n:host(:hover)::part(checkbox-cell),\n:host(:hover) ::slotted(pds-table-cell),\n:host(.is-selected),\n:host(.is-selected)::part(checkbox-cell),\n:host(.is-selected) ::slotted(pds-table-cell) {\n  background: var(--color-background-interactive);\n}\n","import { Component, Element, Host, h, Event, EventEmitter, State } from '@stencil/core';\n\n@Component({\n  tag: 'pds-table-row',\n  styleUrl: 'pds-table-row.scss',\n  shadow: true,\n})\nexport class PdsTableRow {\n  @Element() hostElement: HTMLPdsTableRowElement;\n  tableRef: HTMLPdsTableElement;\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  /**\n   * A local state to track whether the row is currently selected.\n   */\n  @State() isSelected: boolean = false;\n\n  private handleCheckboxClick = () => {\n    this.isSelected = !this.isSelected; // Toggle the selected state\n    const selectedIndex = Array.from(this.hostElement.parentNode.children).indexOf(this.hostElement);\n    this.pdsTableRowSelected.emit({ rowIndex: selectedIndex, isSelected: this.isSelected });\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  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.handleCheckboxClick}\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}

package/components/pds-table.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface PdsTable extends Components.PdsTable, HTMLElement {}
+export const PdsTable: {
+    prototype: PdsTable;
+    new (): PdsTable;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/pds-table.js

@@ -0,0 +1,100 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const pdsTableCss = ":host{--color-background-default:var(--pine-color-white);background:var(--color-background-default);border-collapse:separate;-webkit-box-sizing:border-box;box-sizing:border-box;display:table;width:100%}:host(.is-responsive){background-attachment:local, local, scroll, scroll;background-image:-webkit-gradient(linear, left top, right top, from(var(--color-background-default)), to(var(--color-background-default))), -webkit-gradient(linear, left top, right top, from(var(--color-background-default)), to(var(--color-background-default))), -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.1)), to(rgba(255, 255, 255, 0))), -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.1)), to(rgba(255, 255, 255, 0)));background-image:linear-gradient(to right, var(--color-background-default), var(--color-background-default)), linear-gradient(to right, var(--color-background-default), var(--color-background-default)), linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0));background-position:left center, right center, left center, right center;background-repeat:no-repeat;background-size:4px 100%, 4px 100%, 4px 100%, 4px 100%;display:block;margin:0 auto;max-width:-webkit-fit-content;max-width:-moz-fit-content;max-width:fit-content;overflow-x:auto;white-space:nowrap}";
+const PdsTableStyle0 = pdsTableCss;
+
+const PdsTable$1 = /*@__PURE__*/ proxyCustomElement(class PdsTable extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.compact = undefined;
+        this.componentId = undefined;
+        this.responsive = undefined;
+        this.fixedColumn = undefined;
+        this.selectable = undefined;
+        this.sortingColumn = null;
+        this.sortingDirection = 'asc';
+    }
+    componentWillLoad() {
+        this.sortingColumn = null;
+    }
+    classNames() {
+        const classNames = ['pds-table'];
+        if (this.compact) {
+            classNames.push('is-compact');
+        }
+        if (this.responsive) {
+            classNames.push('is-responsive');
+        }
+        return classNames.join('  ');
+    }
+    sortTable(column, direction) {
+        const tableBody = this.el.querySelector('pds-table-body');
+        // Get the rows in the table body
+        const tableRows = Array.from(tableBody.querySelectorAll('pds-table-row'));
+        // Find the column index based on the column name
+        const columnHeaderCells = Array.from(this.el.querySelectorAll('pds-table-head-cell[sortable]'));
+        const columnHeaderCell = columnHeaderCells.find((cell) => cell.innerText.trim() === column);
+        if (!columnHeaderCell) {
+            console.warn(`Column "${column}" not found.`);
+            return;
+        }
+        const columnIndex = columnHeaderCells.indexOf(columnHeaderCell);
+        // Sort the rows based on the content of the specified column
+        tableRows.sort((a, b) => {
+            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);
+            }
+            else {
+                return valueB.localeCompare(valueA);
+            }
+        });
+        // Clear and append the sorted rows back to the table body
+        tableBody.innerHTML = '';
+        tableRows.forEach((row) => {
+            tableBody.appendChild(row);
+        });
+    }
+    handleTableSort(event) {
+        const { direction } = event.detail;
+        this.sortTable(event.detail.column, direction);
+        this.sortingColumn = event.detail.column;
+        this.sortingDirection = direction;
+    }
+    render() {
+        return (h(Host, { key: 'ce58b1bccc1ff7ee6e38198e63a19fd88f2877e6', class: this.classNames(), id: this.componentId, role: "grid", selectable: this.selectable }, h("slot", { key: 'b748a8befdd212d16c2e6780551a8c11b1843faf' })));
+    }
+    get el() { return this; }
+    static get style() { return PdsTableStyle0; }
+}, [1, "pds-table", {
+        "compact": [4],
+        "componentId": [1, "component-id"],
+        "responsive": [4],
+        "fixedColumn": [4, "fixed-column"],
+        "selectable": [4],
+        "sortingColumn": [32],
+        "sortingDirection": [32]
+    }, [[0, "pdsTableSort", "handleTableSort"]]]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["pds-table"];
+    components.forEach(tagName => { switch (tagName) {
+        case "pds-table":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PdsTable$1);
+            }
+            break;
+    } });
+}
+
+const PdsTable = PdsTable$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PdsTable, defineCustomElement };
+
+//# sourceMappingURL=pds-table.js.map

package/components/pds-table.js.map

@@ -0,0 +1 @@
+{"file":"pds-table.js","mappings":";;AAAA,MAAM,WAAW,GAAG,s2CAAs2C,CAAC;AAC33C,uBAAe,WAAW;;MCMbA,UAAQ;;;;;;;;;;6BA6BqB,IAAI;gCACA,KAAK;;IAEjD,iBAAiB;QACf,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;KAC3B;IAEO,UAAU;QAChB,MAAM,UAAU,GAAG,CAAC,WAAW,CAAC,CAAC;QAEjC,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;SAC/B;QAED,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;SAClC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC9B;IAEO,SAAS,CAAC,MAAc,EAAE,SAAyB;QACzD,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;;QAG1D,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC,CAAC;;QAG1E,MAAM,iBAAiB,GAAkB,KAAK,CAAC,IAAI,CACjD,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,+BAA+B,CAAC,CAC1D,CAAC;QAEF,MAAM,gBAAgB,GAAG,iBAAiB,CAAC,IAAI,CAC7C,CAAC,IAAI,KAAK,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,KAAK,MAAM,CAC3C,CAAC;QAEF,IAAI,CAAC,gBAAgB,EAAE;YACrB,OAAO,CAAC,IAAI,CAAC,WAAW,MAAM,cAAc,CAAC,CAAC;YAC9C,OAAO;SACR;QAED,MAAM,WAAW,GAAG,iBAAiB,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;;QAGhE,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC;YAClB,MAAM,MAAM,GAAG,CAAC,CAAC,aAAa,CAAC,4BAA4B,WAAW,GAAG,CAAC,GAAG,CAAC,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;YAClG,MAAM,MAAM,GAAG,CAAC,CAAC,aAAa,CAAC,4BAA4B,WAAW,GAAG,CAAC,GAAG,CAAC,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;YAElG,IAAI,SAAS,KAAK,KAAK,EAAE;gBACvB,OAAO,MAAM,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;aACrC;iBAAM;gBACL,OAAO,MAAM,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;aACrC;SACF,CAAC,CAAC;;QAGH,SAAS,CAAC,SAAS,GAAG,EAAE,CAAC;QACzB,SAAS,CAAC,OAAO,CAAC,CAAC,GAAG;YACpB,SAAS,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;SAC5B,CAAC,CAAC;KACJ;IAGD,eAAe,CAAC,KAAiE;QAC/E,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;QACnC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;QAC/C,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC;QACzC,IAAI,CAAC,gBAAgB,GAAG,SAAS,CAAC;KACnC;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EACxB,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,IAAI,EAAC,MAAM,EACX,UAAU,EAAE,IAAI,CAAC,UAAU,IAE3B,8DAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PdsTable"],"sources":["src/components/pds-table/pds-table.scss?tag=pds-table&encapsulation=shadow","src/components/pds-table/pds-table.tsx"],"sourcesContent":[":host {\n  --color-background-default: var(--pine-color-white);\n\n  background: var(--color-background-default);\n  border-collapse: separate;\n  box-sizing: border-box;\n  display: table;\n  width: 100%;\n}\n\n:host(.is-responsive) {\n  background-attachment: local, local, scroll, scroll;\n  background-image: linear-gradient(to right, var(--color-background-default), var(--color-background-default)),\n                    linear-gradient(to right, var(--color-background-default), var(--color-background-default)),\n                    linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0)),\n                    linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0));\n  background-position: left center, right center, left center, right center;\n  background-repeat: no-repeat;\n  background-size: 4px 100%, 4px 100%, 4px 100%, 4px 100%;\n  display: block;\n  margin: 0 auto;\n  max-width: fit-content;\n  overflow-x: auto;\n  white-space: nowrap;\n}\n","import { Component, Element, Host, h, Prop, State, Listen } from '@stencil/core';\n\n@Component({\n  tag: 'pds-table',\n  styleUrl: 'pds-table.scss',\n  shadow: true,\n})\nexport class PdsTable {\n  @Element() el: HTMLPdsTableElement;\n  tableRef: HTMLElement;\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  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  render() {\n    return (\n      <Host\n        class={this.classNames()}\n        id={this.componentId}\n        role=\"grid\"\n        selectable={this.selectable}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/pds-tabpanel.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface PdsTabpanel extends Components.PdsTabpanel, HTMLElement {}
+export const PdsTabpanel: {
+    prototype: PdsTabpanel;
+    new (): PdsTabpanel;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/pds-tabpanel.js

@@ -0,0 +1,45 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const pdsTabpanelCss = ":host{display:block}.pds-tabpanel{display:none;margin-top:var(--spacing-panel-margin-top);padding:var(--spacing-panel-padding)}.pds-tabpanel.is-active{display:block}";
+const PdsTabpanelStyle0 = pdsTabpanelCss;
+
+const PdsTabpanel$1 = /*@__PURE__*/ proxyCustomElement(class PdsTabpanel extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.name = undefined;
+        this.parentComponentId = undefined;
+        this.variant = undefined;
+        this.selected = false;
+    }
+    render() {
+        return (h(Host, { key: 'b8619019429f7430c66df0cc41d177d40b59a6e6', slot: "tabpanels" }, h("div", { key: '10a9c2cbf35a60aec932287a839fcca456c41d4c', 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: '50593c1f0174dd44b2a51cc94e89cdd1cee7a8ab' }))));
+    }
+    get el() { return this; }
+    static get style() { return PdsTabpanelStyle0; }
+}, [4, "pds-tabpanel", {
+        "name": [1],
+        "parentComponentId": [1, "parent-component-id"],
+        "variant": [1],
+        "selected": [1028]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["pds-tabpanel"];
+    components.forEach(tagName => { switch (tagName) {
+        case "pds-tabpanel":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PdsTabpanel$1);
+            }
+            break;
+    } });
+}
+
+const PdsTabpanel = PdsTabpanel$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PdsTabpanel, defineCustomElement };
+
+//# sourceMappingURL=pds-tabpanel.js.map

package/components/pds-tabpanel.js.map

@@ -0,0 +1 @@
+{"file":"pds-tabpanel.js","mappings":";;AAAA,MAAM,cAAc,GAAG,uKAAuK,CAAC;AAC/L,0BAAe,cAAc;;MCMhBA,aAAW;;;;;;;wBAwBY,KAAK;;IAEvC,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,WAAW,IACpB,4DACE,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,IAAI,CAAC,iBAAiB,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,QAAQ,EACxD,QAAQ,EAAC,GAAG,qBACK,IAAI,CAAC,iBAAiB,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,EAC1D,KAAK,EAAE,IAAI,CAAC,QAAQ,GAAG,wBAAwB,GAAG,cAAc,IAEhE,8DAAQ,CACJ,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PdsTabpanel"],"sources":["src/components/pds-tabs/pds-tabpanel/pds-tabpanel.scss?tag=pds-tabpanel","src/components/pds-tabs/pds-tabpanel/pds-tabpanel.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.pds-tabpanel {\n  display: none;\n  margin-top: var(--spacing-panel-margin-top);\n  padding: var(--spacing-panel-padding);\n\n  &.is-active {\n    display: block;\n  }\n}\n","import { Component, Element, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'pds-tabpanel',\n  styleUrl: 'pds-tabpanel.scss',\n  shadow: false,\n})\nexport class PdsTabpanel {\n  @Element() el: HTMLPdsTabpanelElement;\n\n  /**\n   * Sets the related tab name, this name must match a `pds-tab`'s tab name property\n   */\n  @Prop() name!: string;\n\n  /**\n   * Keeps track of the parentComponentId unique id, this property is passed by parent component\n   */\n  /** @internal */\n  @Prop() parentComponentId: string;\n\n  /**\n   * Keeps track of if the expected tab variant, this property is passed by parent component\n   */\n  /** @internal */\n  @Prop() variant: string;\n\n  /**\n   * Keeps track of the tabpanel selected state, this property is passed by parent component\n   */\n  /** @internal */\n  @Prop({mutable: true}) selected = false;          // eslint-disable-line @stencil-community/strict-mutable\n\n  render() {\n    return (\n      <Host slot=\"tabpanels\">\n        <div\n          role=\"tabpanel\"\n          id={this.parentComponentId + \"__\" + this.name + '-panel'}\n          tabindex=\"0\"\n          aria-labelledby={this.parentComponentId + \"__\" + this.name}\n          class={this.selected ? \"pds-tabpanel is-active\" : \"pds-tabpanel\"}\n        >\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/pds-tabs.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface PdsTabs extends Components.PdsTabs, HTMLElement {}
+export const PdsTabs: {
+    prototype: PdsTabs;
+    new (): PdsTabs;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/pds-tabs.js

@@ -0,0 +1,119 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const pdsTabsCss = ":host{--spacing-panel-margin-top:0;--spacing-panel-padding:0;--outline:2px solid var(--pine-color-blue-200);--spacing-gap-availability:var(--pine-spacing-100);--spacing-gap-default:var(--pine-spacing-300);--spacing-gap-filter:var(--pine-spacing-200);display:block}.pds-tabs__tablist{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--spacing-gap-default)}:host(.pds-tabs--availability) .pds-tabs__tablist{gap:var(--spacing-gap-availability)}:host(.pds-tabs--filter) .pds-tabs__tablist{gap:var(--spacing-gap-filter)}";
+const PdsTabsStyle0 = pdsTabsCss;
+
+const PdsTabs$1 = /*@__PURE__*/ proxyCustomElement(class PdsTabs extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.tablistLabel = undefined;
+        this.componentId = undefined;
+        this.variant = undefined;
+        this.activeTabName = undefined;
+        this.activeTabIndex = undefined;
+    }
+    tabClickHandler(event) {
+        if (this.componentId === event.detail[1]) {
+            this.activeTabIndex = event.detail[0];
+            this.activeTabName = this.tabs[this.activeTabIndex].name;
+        }
+    }
+    handleKeyDown(ev) {
+        const keySet = ["ArrowLeft", "ArrowRight", "Home", "End"];
+        if (keySet.includes(ev.key)) {
+            ev.preventDefault();
+            this.moveActiveTab(ev.key);
+        }
+    }
+    moveActiveTab(key) {
+        const firstTabNumber = 0;
+        const lastTabNumber = this.tabs.length - 1;
+        let moveFocusTo = null;
+        switch (key) {
+            case 'ArrowLeft':
+                moveFocusTo = (this.activeTabIndex === firstTabNumber) ? lastTabNumber : (this.activeTabIndex + (-1));
+                break;
+            case 'ArrowRight':
+                moveFocusTo = (this.activeTabIndex === lastTabNumber) ? firstTabNumber : (this.activeTabIndex + 1);
+                break;
+            case 'Home':
+                moveFocusTo = firstTabNumber;
+                break;
+            case 'End':
+                moveFocusTo = lastTabNumber;
+                break;
+        }
+        // Move focus to the button element within `pds-tab`
+        this.tabs[moveFocusTo].children[0].focus();
+        this.activeTabName = this.tabs[moveFocusTo].name;
+        this.activeTabIndex = moveFocusTo;
+    }
+    findAllChildren() {
+        this.tabs = this.el.querySelectorAll('pds-tab');
+        this.tabPanels = this.el.querySelectorAll('pds-tabpanel');
+    }
+    propGeneration(child, index = 0) {
+        child.parentComponentId = this.componentId.toString();
+        child.variant = this.variant.toString();
+        child.selected = (this.activeTabName === child.name) ? true : false;
+        child['index'] = index;
+    }
+    passPropsToChildren() {
+        this.tabs.forEach((child, index) => {
+            if (this.activeTabName === child.name)
+                this.activeTabIndex = index;
+            this.propGeneration(child, index);
+        });
+        this.tabPanels.forEach((child) => {
+            this.propGeneration(child);
+        });
+    }
+    classNames() {
+        let className = `pds-tabs`;
+        if (this.variant && this.variant != 'primary') {
+            const variantClassName = `pds-tabs--${this.variant}`;
+            className += ' ' + variantClassName;
+        }
+        return className;
+    }
+    ;
+    componentWillLoad() {
+        this.findAllChildren();
+    }
+    componentWillRender() {
+        this.passPropsToChildren();
+    }
+    render() {
+        return (h(Host, { key: '92748fc6123067ba04f9cc81ea949366fb1c2a8f', "active-tab-name": this.activeTabName, class: this.classNames(), id: this.componentId }, h("div", { key: '809cbe1ed4e973db39ea69be9e30ac54881564af', class: "pds-tabs__tablist", role: "tablist", "aria-label": this.tablistLabel }, h("slot", { key: 'b23af8a48dee0528cc9f7d2b84a42411e2b14e6d', name: "tabs" })), h("slot", { key: 'fdb46b7125f735531b13c1ac82a08f27998e7511', name: "tabpanels" })));
+    }
+    get el() { return this; }
+    static get style() { return PdsTabsStyle0; }
+}, [1, "pds-tabs", {
+        "tablistLabel": [1, "tablist-label"],
+        "componentId": [1, "component-id"],
+        "variant": [1],
+        "activeTabName": [1025, "active-tab-name"],
+        "activeTabIndex": [1026, "active-tab-index"]
+    }, [[16, "pdsTabClick", "tabClickHandler"], [0, "keydown", "handleKeyDown"]]]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["pds-tabs"];
+    components.forEach(tagName => { switch (tagName) {
+        case "pds-tabs":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PdsTabs$1);
+            }
+            break;
+    } });
+}
+
+const PdsTabs = PdsTabs$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PdsTabs, defineCustomElement };
+
+//# sourceMappingURL=pds-tabs.js.map

package/components/pds-tabs.js.map

@@ -0,0 +1 @@
+{"file":"pds-tabs.js","mappings":";;AAAA,MAAM,UAAU,GAAG,+hBAA+hB,CAAC;AACnjB,sBAAe,UAAU;;MCUZA,SAAO;;;;;;;;;;;IAmClB,eAAe,CAAC,KAAuB;QACrC,IAAI,IAAI,CAAC,WAAW,KAAK,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE;YACxC,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;YACtC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,IAAI,CAAC;SAC1D;KACF;IAGD,aAAa,CAAC,EAAiB;QAC7B,MAAM,MAAM,GAAG,CAAC,WAAW,EAAE,YAAY,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC;QAE1D,IAAI,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE;YAC3B,EAAE,CAAC,cAAc,EAAE,CAAC;YACpB,IAAI,CAAC,aAAa,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;SAC5B;KACF;IAEO,aAAa,CAAC,GAAW;QAC/B,MAAM,cAAc,GAAG,CAAC,CAAC;QACzB,MAAM,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;QAE3C,IAAI,WAAW,GAAG,IAAI,CAAC;QAEvB,QAAQ,GAAG;YACT,KAAK,WAAW;gBACd,WAAW,GAAG,CAAC,IAAI,CAAC,cAAc,KAAK,cAAc,IAAI,aAAa,IAAI,IAAI,CAAC,cAAc,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;gBACtG,MAAM;YACR,KAAK,YAAY;gBACf,WAAW,GAAG,CAAC,IAAI,CAAC,cAAc,KAAK,aAAa,IAAI,cAAc,IAAI,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,CAAC;gBACnG,MAAM;YACR,KAAK,MAAM;gBACT,WAAW,GAAG,cAAc,CAAC;gBAC7B,MAAM;YACR,KAAK,KAAK;gBACR,WAAW,GAAG,aAAa,CAAC;gBAC5B,MAAM;SACT;;QAGD,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;QAC3C,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC;QACjD,IAAI,CAAC,cAAc,GAAG,WAAW,CAAC;KACnC;IAEO,eAAe;QACrB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC;QAChD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;KAC3D;IAEO,cAAc,CAAC,KAAK,EAAE,KAAK,GAAG,CAAC;QACrC,KAAK,CAAC,iBAAiB,GAAG,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE,CAAC;QACtD,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC;QACxC,KAAK,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,aAAa,KAAK,KAAK,CAAC,IAAI,IAAI,IAAI,GAAG,KAAK,CAAC;QACpE,KAAK,CAAC,OAAO,CAAC,GAAG,KAAK,CAAC;KACxB;IAEO,mBAAmB;QACzB,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,KAAK;YAC7B,IAAI,IAAI,CAAC,aAAa,KAAK,KAAK,CAAC,IAAI;gBAAE,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;YACnE,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;SACnC,CAAC,CAAC;QAEH,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,KAAK;YAC3B,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;SAC5B,CAAC,CAAC;KACJ;IAEO,UAAU;QAChB,IAAI,SAAS,GAAG,UAAU,CAAC;QAC3B,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,IAAI,SAAS,EAAE;YAC7C,MAAM,gBAAgB,GAAG,aAAa,IAAI,CAAC,OAAO,EAAE,CAAC;YACrD,SAAS,IAAI,GAAG,GAAG,gBAAgB,CAAC;SACrC;QAED,OAAO,SAAS,CAAC;KAClB;;IAED,iBAAiB;QACf,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAED,mBAAmB;QACjB,IAAI,CAAC,mBAAmB,EAAE,CAAC;KAC5B;IAED,MAAM;QACJ,QACE,EAAC,IAAI,wEAAkB,IAAI,CAAC,aAAa,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,WAAW,IACvF,4DAAK,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,SAAS,gBAAa,IAAI,CAAC,YAAY,IACzE,6DAAM,IAAI,EAAC,MAAM,GAAG,CAChB,EACN,6DAAM,IAAI,EAAC,WAAW,GAAG,CACpB,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PdsTabs"],"sources":["src/components/pds-tabs/pds-tabs.scss?tag=pds-tabs&encapsulation=shadow","src/components/pds-tabs/pds-tabs.tsx"],"sourcesContent":[":host {\n  /**\n   * @prop --spacing-panel-margin-top: Optional margin-top for panels\n   */\n  --spacing-panel-margin-top: 0;\n  /**\n   * @prop --spacing-panel-padding: Optional padding for panels\n   */\n  --spacing-panel-padding: 0;\n\n  --outline: 2px solid var(--pine-color-blue-200);\n\n  --spacing-gap-availability: var(--pine-spacing-100);\n  --spacing-gap-default: var(--pine-spacing-300);\n  --spacing-gap-filter: var(--pine-spacing-200);\n\n  display: block;\n}\n\n.pds-tabs__tablist {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--spacing-gap-default);\n}\n\n:host(.pds-tabs--availability) .pds-tabs__tablist {\n  gap: var(--spacing-gap-availability);\n}\n\n:host(.pds-tabs--filter) .pds-tabs__tablist {\n  gap: var(--spacing-gap-filter);\n}\n","import { Component, Element, Host, h, Prop, Listen } from '@stencil/core';\n\n  /**\n * @slot tabs - Content is placed within the `div[role=\"tablist\"]` element as children\n * @slot tabpanels - Content is placed directly after the `div[role=\"tablist\"]` element as siblings\n */\n@Component({\n  tag: 'pds-tabs',\n  styleUrl: 'pds-tabs.scss',\n  shadow: true,\n})\nexport class PdsTabs {\n  private tabs;\n  private tabPanels;\n\n  @Element() el: HTMLPdsTabsElement;\n\n  /**\n   * Sets the aria-label attached to the tablist element\n   */\n  @Prop() tablistLabel!: string;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Sets tabs variant styles as outlined in Figma documentation\n   */\n  @Prop() variant!: 'primary' | 'availability' | 'filter';\n\n  /**\n   * Sets the starting active tab name and maintains the name as the component re-renders\n   */\n  @Prop({mutable: true}) activeTabName!: string;\n\n  /**\n   * Sets the starting active tab index number and maintains the index number as the component re-renders\n   */\n  /** @internal */\n  @Prop({mutable: true}) activeTabIndex: number;\n\n  @Listen('pdsTabClick', {\n    target: 'body',\n  })\n  tabClickHandler(event: CustomEvent<any>) {\n    if (this.componentId === event.detail[1]) {\n      this.activeTabIndex = event.detail[0];\n      this.activeTabName = this.tabs[this.activeTabIndex].name;\n    }\n  }\n\n  @Listen('keydown', {})\n  handleKeyDown(ev: KeyboardEvent) {\n    const keySet = [\"ArrowLeft\", \"ArrowRight\", \"Home\", \"End\"];\n\n    if (keySet.includes(ev.key)) {\n      ev.preventDefault();\n      this.moveActiveTab(ev.key);\n    }\n  }\n\n  private moveActiveTab(key: string) {\n    const firstTabNumber = 0;\n    const lastTabNumber = this.tabs.length - 1;\n\n    let moveFocusTo = null;\n\n    switch (key) {\n      case 'ArrowLeft':\n        moveFocusTo = (this.activeTabIndex === firstTabNumber) ? lastTabNumber : (this.activeTabIndex + (-1));\n        break;\n      case 'ArrowRight':\n        moveFocusTo = (this.activeTabIndex === lastTabNumber) ? firstTabNumber : (this.activeTabIndex + 1);\n        break;\n      case 'Home':\n        moveFocusTo = firstTabNumber;\n        break;\n      case 'End':\n        moveFocusTo = lastTabNumber;\n        break;\n    }\n\n    // Move focus to the button element within `pds-tab`\n    this.tabs[moveFocusTo].children[0].focus();\n    this.activeTabName = this.tabs[moveFocusTo].name;\n    this.activeTabIndex = moveFocusTo;\n  }\n\n  private findAllChildren() {\n    this.tabs = this.el.querySelectorAll('pds-tab');\n    this.tabPanels = this.el.querySelectorAll('pds-tabpanel');\n  }\n\n  private propGeneration(child, index = 0) {\n    child.parentComponentId = this.componentId.toString();\n    child.variant = this.variant.toString();\n    child.selected = (this.activeTabName === child.name) ? true : false;\n    child['index'] = index;\n  }\n\n  private passPropsToChildren() {\n    this.tabs.forEach((child, index) => {\n      if (this.activeTabName === child.name) this.activeTabIndex = index;\n      this.propGeneration(child, index);\n    });\n\n    this.tabPanels.forEach((child) => {\n      this.propGeneration(child);\n    });\n  }\n\n  private classNames() {\n    let className = `pds-tabs`;\n    if (this.variant && this.variant != 'primary') {\n      const variantClassName = `pds-tabs--${this.variant}`;\n      className += ' ' + variantClassName;\n    }\n\n    return className;\n  };\n\n  componentWillLoad() {\n    this.findAllChildren();\n  }\n\n  componentWillRender() {\n    this.passPropsToChildren();\n  }\n\n  render() {\n    return (\n      <Host active-tab-name={this.activeTabName} class={this.classNames()} id={this.componentId}>\n        <div class=\"pds-tabs__tablist\" role=\"tablist\" aria-label={this.tablistLabel}>\n          <slot name=\"tabs\" />\n        </div>\n        <slot name=\"tabpanels\" />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/pds-textarea.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface PdsTextarea extends Components.PdsTextarea, HTMLElement {}
+export const PdsTextarea: {
+    prototype: PdsTextarea;
+    new (): PdsTextarea;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/pds-textarea.js

@@ -0,0 +1,82 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { i as isRequired, P as PdsLabel, a as assignDescription, m as messageId } from './pds-label.js';
+
+const pdsTextareaCss = ":host{--box-shadow-focus:0 0 0 2px var(--color-focus-visible-outline);--box-shadow-focus-error:0 0 0 2px var(--color-focus-visible-outline-error);--color:var(--pine-color-charcoal-400);--color-background:var(--pine-color-white);--color-background-disabled:var(--pine-color-grey-200);--color-border-default:var(--pine-color-grey-400);--color-border-error:var(--pine-color-red-300);--color-border-focus-visible:var(--pine-color-grey-300);--color-border-hover:var(--pine-color-grey-500);--color-disabled-default:var(--pine-color-charcoal-200);--color-error-default:var(--pine-color-red-300);--color-focus-visible-outline:var(--pine-color-primary-200);--color-focus-visible-outline-error:var(--pine-color-red-200);--color-placeholder-default:var(--pine-color-charcoal-200);--font-size-field:var(--pine-font-size-100);--font-size-helper-message:var(--pine-font-size-075);--font-size-label:var(--pine-font-size-100);--font-weight-field:var(--pine-font-weight-normal);--font-weight-helper-message:var(--pine-font-weight-normal);--font-weight-label:var(--pine-font-weight-medium);--line-height-field:var(--pine-line-height-150);--line-height-helper-message:var(--pine-line-height-125);--line-height-label:var(--pine-line-height-150);--spacing-margin-block-end-label:var(--pine-spacing-100);--spacing-margin-block-start-helper-message:var(--pine-spacing-100);--spacing-padding-block-field:var(--pine-spacing-100);--spacing-padding-inline-field:var(--pine-spacing-200);display:inline}.pds-textarea{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}label{display:block;font-size:var(--font-size-label);font-weight:var(--font-weight-label);line-height:var(--line-height-label);-webkit-margin-after:var(--spacing-margin-block-end-label);margin-block-end:var(--spacing-margin-block-end-label)}.pds-textarea__field{background-color:var(--color-background);border:var(--pine-border-interactive);border-radius:var(--pine-border-radius-md);font-family:inherit;font-size:var(--font-size-field);font-weight:var(--font-weight-field);line-height:var(--line-height-field);padding:var(--spacing-padding-block-field) var(--spacing-padding-inline-field)}.pds-textarea__field:hover:not(:disabled,.is-invalid){border-color:var(--color-border-hover)}.pds-textarea__field:disabled{background-color:var(--color-background-disabled);color:var(--color-disabled-default);cursor:not-allowed}.pds-textarea__field:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-textarea__field::-webkit-input-placeholder{color:var(--color-placeholder-default)}.pds-textarea__field::-moz-placeholder{color:var(--color-placeholder-default)}.pds-textarea__field:-ms-input-placeholder{color:var(--color-placeholder-default)}.pds-textarea__field::-ms-input-placeholder{color:var(--color-placeholder-default)}.pds-textarea__field::placeholder{color:var(--color-placeholder-default)}.pds-textarea__field.is-invalid{border-color:var(--color-border-error)}.pds-textarea__field.is-invalid:focus-visible{-webkit-box-shadow:var(--box-shadow-focus-error);box-shadow:var(--box-shadow-focus-error)}.pds-textarea__error-message,.pds-textarea__helper-message{font-size:var(--font-size-helper-message);font-weight:var(--font-weight-helper-message);line-height:var(--line-height-helper-message);-webkit-margin-before:var(--spacing-margin-block-start-helper-message);margin-block-start:var(--spacing-margin-block-start-helper-message)}.pds-textarea__error-message{color:var(--color-error-default)}";
+const PdsTextareaStyle0 = pdsTextareaCss;
+
+const PdsTextarea$1 = /*@__PURE__*/ proxyCustomElement(class PdsTextarea extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.pdsTextareaChange = createEvent(this, "pdsTextareaChange", 7);
+        this.onTextareaChange = (ev) => {
+            const textarea = ev.target;
+            isRequired(textarea, this);
+            if (textarea) {
+                this.value = textarea.innerHTML;
+            }
+            this.pdsTextareaChange.emit({ value: this.value, event: ev });
+        };
+        this.componentId = undefined;
+        this.disabled = false;
+        this.errorMessage = undefined;
+        this.helperMessage = undefined;
+        this.invalid = false;
+        this.label = undefined;
+        this.name = this.componentId;
+        this.placeholder = undefined;
+        this.readonly = false;
+        this.required = false;
+        this.rows = undefined;
+        this.value = undefined;
+    }
+    textareaClassNames() {
+        const classNames = ['pds-textarea__field'];
+        if (this.invalid && this.invalid === true) {
+            classNames.push('is-invalid');
+        }
+        return classNames.join('  ');
+    }
+    render() {
+        return (h(Host, { key: 'a6f6eb13665857ec8762d454d79ff216e2062a66', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: 'fa77f9c7c29f214ee4d8ddb8e1e48d4d16b6a47e', class: "pds-textarea" }, this.label &&
+            h(PdsLabel, { key: '75c242138f5c2a33a82feaa775dae0c05843d2c1', htmlFor: this.componentId, text: this.label }), h("textarea", { key: '8bebb57b878c745e07ebfc18afd2aaf7d2da66a5', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, 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: 'b9a83aeb83b0cf4232359154d36a8ec48b0a3638', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
+            h("p", { key: 'ee70c7aa56b8a8e18de58394c04140065670f8db', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, this.errorMessage))));
+    }
+    get el() { return this; }
+    static get style() { return PdsTextareaStyle0; }
+}, [1, "pds-textarea", {
+        "componentId": [1, "component-id"],
+        "disabled": [4],
+        "errorMessage": [1, "error-message"],
+        "helperMessage": [1, "helper-message"],
+        "invalid": [1028],
+        "label": [1],
+        "name": [1],
+        "placeholder": [1],
+        "readonly": [4],
+        "required": [4],
+        "rows": [2],
+        "value": [1025]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["pds-textarea"];
+    components.forEach(tagName => { switch (tagName) {
+        case "pds-textarea":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PdsTextarea$1);
+            }
+            break;
+    } });
+}
+
+const PdsTextarea = PdsTextarea$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PdsTextarea, defineCustomElement };
+
+//# sourceMappingURL=pds-textarea.js.map

package/components/pds-textarea.js.map

@@ -0,0 +1 @@
+{"file":"pds-textarea.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,+7GAA+7G,CAAC;AACv9G,0BAAe,cAAc;;MCShBA,aAAW;;;;;;QAwEd,qBAAgB,GAAG,CAAC,EAAS;YACnC,MAAM,QAAQ,GAAG,EAAE,CAAC,MAA6B,CAAC;YAClD,UAAU,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;YAE3B,IAAI,QAAQ,EAAE;gBACZ,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC,SAAS,CAAC;aACjC;YAED,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,EAAC,CAAC,CAAC;SAC7D,CAAC;;wBArEiB,KAAK;;;uBAgBS,KAAK;;oBAUf,IAAI,CAAC,WAAW;;wBAWpB,KAAK;wBAML,KAAK;;;;IA4BhB,kBAAkB;QACxB,MAAM,UAAU,GAAG,CAAC,qBAAqB,CAAC,CAAC;QAE3C,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,KAAK,IAAI,EAAE;YACzC,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;SAC/B;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC9B;IAED,MAAM;QACJ,QACE,EAAC,IAAI,sEACY,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,IAE5C,4DAAK,KAAK,EAAC,cAAc,IACtB,IAAI,CAAC,KAAK;YACT,EAAC,QAAQ,qDAAC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,GAAI,EAE3D,qFACoB,iBAAiB,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,kBACzE,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,SAAS,EAC/C,KAAK,EAAE,IAAI,CAAC,kBAAkB,EAAE,EAChC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,gBAAgB,IAC/B,IAAI,CAAC,KAAK,CAAY,EACvB,IAAI,CAAC,aAAa;YACjB,0DACE,KAAK,EAAC,8BAA8B,EACpC,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,IAExC,IAAI,CAAC,aAAa,CACjB,EAEL,IAAI,CAAC,OAAO;YACX,uEACY,WAAW,EACrB,KAAK,EAAC,6BAA6B,EACnC,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,IAEvC,IAAI,CAAC,YAAY,CAChB,CAEF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PdsTextarea"],"sources":["src/components/pds-textarea/pds-textarea.scss?tag=pds-textarea&encapsulation=shadow","src/components/pds-textarea/pds-textarea.tsx"],"sourcesContent":[":host {\n  --box-shadow-focus: 0 0 0 2px var(--color-focus-visible-outline);\n  --box-shadow-focus-error: 0 0 0 2px var(--color-focus-visible-outline-error);\n\n  --color: var(--pine-color-charcoal-400);\n  --color-background: var(--pine-color-white);\n  --color-background-disabled: var(--pine-color-grey-200);\n  --color-border-default: var(--pine-color-grey-400);\n  --color-border-error: var(--pine-color-red-300);\n  --color-border-focus-visible: var(--pine-color-grey-300);\n  --color-border-hover: var(--pine-color-grey-500);\n  --color-disabled-default: var(--pine-color-charcoal-200);\n  --color-error-default: var(--pine-color-red-300);\n  --color-focus-visible-outline: var(--pine-color-primary-200);\n  --color-focus-visible-outline-error: var(--pine-color-red-200);\n  --color-placeholder-default: var(--pine-color-charcoal-200);\n\n  --font-size-field: var(--pine-font-size-100);\n  --font-size-helper-message: var(--pine-font-size-075);\n  --font-size-label: var(--pine-font-size-100);\n  --font-weight-field: var(--pine-font-weight-normal);\n  --font-weight-helper-message: var(--pine-font-weight-normal);\n  --font-weight-label: var(--pine-font-weight-medium);\n\n  --line-height-field: var(--pine-line-height-150);\n  --line-height-helper-message: var(--pine-line-height-125);\n  --line-height-label: var(--pine-line-height-150);\n\n  --spacing-margin-block-end-label: var(--pine-spacing-100);\n  --spacing-margin-block-start-helper-message: var(--pine-spacing-100);\n  --spacing-padding-block-field: var(--pine-spacing-100);\n  --spacing-padding-inline-field: var(--pine-spacing-200);\n\n  display: inline;\n}\n\n.pds-textarea {\n  display: flex;\n  flex-direction: column;\n}\n\nlabel {\n  display: block;\n  font-size: var(--font-size-label);\n  font-weight: var(--font-weight-label);\n  line-height: var(--line-height-label);\n  margin-block-end: var(--spacing-margin-block-end-label);\n}\n\n.pds-textarea__field {\n  background-color: var(--color-background);\n  border: var(--pine-border-interactive);\n  border-radius: var(--pine-border-radius-md);\n  font-family: inherit;\n  font-size: var(--font-size-field);\n  font-weight: var(--font-weight-field);\n  line-height: var(--line-height-field);\n  padding: var(--spacing-padding-block-field) var(--spacing-padding-inline-field);\n\n  &:hover:not(:disabled, .is-invalid) {\n    border-color: var(--color-border-hover);\n  }\n\n  &:disabled {\n    background-color: var(--color-background-disabled);\n    color: var(--color-disabled-default);\n    cursor: not-allowed;\n  }\n\n  &:focus-visible {\n    // outline: var(--pine-border-focus); Border radius for outline does not work in Safari\n    box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n    outline: none;\n  }\n\n  &::placeholder {\n    color: var(--color-placeholder-default);\n  }\n\n  &.is-invalid {\n    border-color: var(--color-border-error);\n\n    &:focus-visible {\n      box-shadow: var(--box-shadow-focus-error);\n    }\n  }\n}\n\n.pds-textarea__error-message,\n.pds-textarea__helper-message {\n  font-size: var(--font-size-helper-message);\n  font-weight: var(--font-weight-helper-message);\n  line-height: var(--line-height-helper-message);\n  margin-block-start: var(--spacing-margin-block-start-helper-message);\n}\n\n.pds-textarea__error-message {\n  color: var(--color-error-default);\n}\n","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';\n\n@Component({\n  tag: 'pds-textarea',\n  styleUrl: 'pds-textarea.scss',\n  shadow: true,\n})\nexport class PdsTextarea {\n  @Element() el: HTMLPdsTextareaElement;\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.innerHTML;\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            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              {this.errorMessage}\n            </p>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/pds-tooltip.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface PdsTooltip extends Components.PdsTooltip, HTMLElement {}
+export const PdsTooltip: {
+    prototype: PdsTooltip;
+    new (): PdsTooltip;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;