@pine-ds/core 1.3.0-dev.2 → 1.3.0-dev.3

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

@@ -0,0 +1,248 @@
+import { Host, h } from "@stencil/core";
+export class PdsTable {
+    constructor() {
+        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;
+    }
+    handleTableSelectAll(event) {
+        if (event.defaultPrevented)
+            return;
+        const pdsTableBody = this.el.querySelector('pds-table-body');
+        const tableRows = Array.from(pdsTableBody.querySelectorAll('pds-table-row'));
+        tableRows.forEach((row) => {
+            row.isSelected = event.detail.isSelected;
+        });
+    }
+    async handleTableSelect(event) {
+        if (event.defaultPrevented)
+            return;
+        const allTableRows = this.el.querySelectorAll('pds-table-row');
+        const allSelectedRows = Array.from(allTableRows).every((row) => row.isSelected);
+        const noneSelectedRows = Array.from(allTableRows).every((row) => !row.isSelected);
+        const pdsTableHead = this.el.querySelector('pds-table-head');
+        if (!pdsTableHead)
+            return;
+        const headerCheckbox = pdsTableHead.shadowRoot.querySelector('pds-checkbox');
+        headerCheckbox.checked = allSelectedRows;
+        headerCheckbox.indeterminate = !allSelectedRows && !noneSelectedRows;
+    }
+    render() {
+        return (h(Host, { key: '95cc4db296681faa0fc046c9b1d6807d640b7730', class: this.classNames(), id: this.componentId, role: "grid", selectable: this.selectable, tabindex: "0" }, h("slot", { key: 'ecc9bc0761409d5a2819a05d72290c294e27454f' })));
+    }
+    static get is() { return "pds-table"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pds-table.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pds-table.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "compact": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines if table displays compact which reduces the spacing of table cells."
+                },
+                "attribute": "compact",
+                "reflect": false
+            },
+            "componentId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A unique identifier used for the table `id` attribute."
+                },
+                "attribute": "component-id",
+                "reflect": false
+            },
+            "responsive": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enables the table to be responsive by horizontally scrolling on smaller screens."
+                },
+                "attribute": "responsive",
+                "reflect": false
+            },
+            "fixedColumn": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines if table displays fixed column which fixes the first column of the table."
+                },
+                "attribute": "fixed-column",
+                "reflect": false
+            },
+            "selectable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines if table displays checkboxes for selectable rows."
+                },
+                "attribute": "selectable",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "sortingColumn": {},
+            "sortingDirection": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "pdsTableSelect",
+                "name": "pdsTableSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event that is emitted when the checkbox is clicked, carrying the rowIndex and selected value."
+                },
+                "complexType": {
+                    "original": "{ rowIndex: number; isSelected: boolean }",
+                    "resolved": "{ rowIndex: number; isSelected: boolean; }",
+                    "references": {}
+                }
+            }, {
+                "method": "pdsTableSelectAll",
+                "name": "pdsTableSelectAll",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event that is emitted when the select all checkbox is clicked, carrying the selected value."
+                },
+                "complexType": {
+                    "original": "{ isSelected: boolean }",
+                    "resolved": "{ isSelected: boolean; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "pdsTableSort",
+                "method": "handleTableSort",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "pdsTableSelectAll",
+                "method": "handleTableSelectAll",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "pdsTableRowSelected",
+                "method": "handleTableSelect",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=pds-table.js.map

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

@@ -0,0 +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  styleUrl: '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"]}

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

@@ -0,0 +1,227 @@
+import { html } from 'lit-html';
+import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
+import { withActions } from '@storybook/addon-actions/decorator';
+
+export default {
+  argTypes: extractArgTypes('pds-table'),
+  component: 'pds-table',
+  decorators: [withActions],
+  parameters: {
+    actions: {
+      handles: ['onclick', 'pdsTableRowSelected', 'onclick', 'pdsTableSelectAll'],
+    },
+  },
+  title: 'components/Table',
+};
+
+const BaseTemplate = (args) => html`
+<pds-table
+  compact="${args.compact}"
+  component-id="${args.componentId}"
+  fixed-column="${args.fixedColumn}"
+  responsive="${args.responsive}"
+  selectable="${args.selectable}"
+>
+  <pds-table-head>
+    <pds-table-head-cell>Column Title</pds-table-head-cell>
+    <pds-table-head-cell>Column Title</pds-table-head-cell>
+    <pds-table-head-cell>Column Title</pds-table-head-cell>
+  </pds-table-head>
+  <pds-table-body>
+    <pds-table-row value="row1">
+      <pds-table-cell>Row Item Alpha</pds-table-cell>
+      <pds-table-cell>Row Item Alpha</pds-table-cell>
+      <pds-table-cell>Row Item Alpha</pds-table-cell>
+    </pds-table-row>
+    <pds-table-row value="row2">
+      <pds-table-cell>Row Item Bravo</pds-table-cell>
+      <pds-table-cell>Row Item Bravo</pds-table-cell>
+      <pds-table-cell>Row Item Bravo</pds-table-cell>
+    </pds-table-row>
+    <pds-table-row value="row3">
+      <pds-table-cell>Row Item Charlie</pds-table-cell>
+      <pds-table-cell>Row Item Charlie</pds-table-cell>
+      <pds-table-cell>Row Item Charlie</pds-table-cell>
+    </pds-table-row>
+  </pds-table-body>
+</pds-table>`;
+
+const ResponsiveTemplate = (args) => html`
+<pds-table
+  compact="${args.compact}"
+  component-id="${args.componentId}"
+  fixed-column="${args.fixedColumn}"
+  responsive="${args.responsive}"
+  selectable="${args.selectable}"
+>
+  <pds-table-head>
+    <pds-table-head-cell>Column Title</pds-table-head-cell>
+    <pds-table-head-cell>Column Title</pds-table-head-cell>
+    <pds-table-head-cell>Column Title</pds-table-head-cell>
+    <pds-table-head-cell>Column Title</pds-table-head-cell>
+    <pds-table-head-cell>Column Title</pds-table-head-cell>
+    <pds-table-head-cell>Column Title</pds-table-head-cell>
+    <pds-table-head-cell>Column Title</pds-table-head-cell>
+    <pds-table-head-cell>Column Title</pds-table-head-cell>
+    <pds-table-head-cell>Column Title</pds-table-head-cell>
+    <pds-table-head-cell>Column Title</pds-table-head-cell>
+    <pds-table-head-cell>Column Title</pds-table-head-cell>
+    <pds-table-head-cell>Column Title</pds-table-head-cell>
+  </pds-table-head>
+  <pds-table-body>
+    <pds-table-row value="responsive1">
+      <pds-table-cell>Row Item Alpha</pds-table-cell>
+      <pds-table-cell>Row Item Beta</pds-table-cell>
+      <pds-table-cell>Row Item Charlie</pds-table-cell>
+      <pds-table-cell>Row Item Delta</pds-table-cell>
+      <pds-table-cell>Row Item Echo</pds-table-cell>
+      <pds-table-cell>Row Item Foxtrot</pds-table-cell>
+      <pds-table-cell>Row Item Golf</pds-table-cell>
+      <pds-table-cell>Row Item Hotel</pds-table-cell>
+      <pds-table-cell>Row Item Juliett</pds-table-cell>
+      <pds-table-cell>Row Item Kilo</pds-table-cell>
+      <pds-table-cell>Row Item Lima</pds-table-cell>
+      <pds-table-cell>Row Item Mike</pds-table-cell>
+    </pds-table-row>
+    <pds-table-row value="responsive2">
+      <pds-table-cell>Row Item Alpha</pds-table-cell>
+      <pds-table-cell>Row Item Beta</pds-table-cell>
+      <pds-table-cell>Row Item Charlie</pds-table-cell>
+      <pds-table-cell>Row Item Delta</pds-table-cell>
+      <pds-table-cell>Row Item Echo</pds-table-cell>
+      <pds-table-cell>Row Item Foxtrot</pds-table-cell>
+      <pds-table-cell>Row Item Golf</pds-table-cell>
+      <pds-table-cell>Row Item Hotel</pds-table-cell>
+      <pds-table-cell>Row Item Juliett</pds-table-cell>
+      <pds-table-cell>Row Item Kilo</pds-table-cell>
+      <pds-table-cell>Row Item Lima</pds-table-cell>
+      <pds-table-cell>Row Item Mike</pds-table-cell>
+    </pds-table-row>
+    <pds-table-row value="responsive3">
+      <pds-table-cell>Row Item Alpha</pds-table-cell>
+      <pds-table-cell>Row Item Beta</pds-table-cell>
+      <pds-table-cell>Row Item Charlie</pds-table-cell>
+      <pds-table-cell>Row Item Delta</pds-table-cell>
+      <pds-table-cell>Row Item Echo</pds-table-cell>
+      <pds-table-cell>Row Item Foxtrot</pds-table-cell>
+      <pds-table-cell>Row Item Golf</pds-table-cell>
+      <pds-table-cell>Row Item Hotel</pds-table-cell>
+      <pds-table-cell>Row Item Juliett</pds-table-cell>
+      <pds-table-cell>Row Item Kilo</pds-table-cell>
+      <pds-table-cell>Row Item Lima</pds-table-cell>
+      <pds-table-cell>Row Item Mike</pds-table-cell>
+    </pds-table-row>
+  </pds-table-body>
+</pds-table>`;
+
+const SortableTemplate = (args) => html`
+<pds-table
+  compact="${args.compact}"
+  component-id="${args.componentId}"
+  fixed-column="${args.fixedColumn}"
+  responsive="${args.responsive}"
+  selectable="${args.selectable}"
+>
+  <pds-table-head>
+    <pds-table-head-cell sortable=${args.sortable}>Name</pds-table-head-cell>
+    <pds-table-head-cell sortable=${args.sortable}>Email</pds-table-head-cell>
+    <pds-table-head-cell sortable=${args.sortable}>Email Marketing</pds-table-head-cell>
+  </pds-table-head>
+  <pds-table-body>
+    <pds-table-row>
+      <pds-table-cell>John Doe</pds-table-cell>
+      <pds-table-cell>john.doe@example.com</pds-table-cell>
+      <pds-table-cell>Subscribed</pds-table-cell>
+    </pds-table-row>
+    <pds-table-row>
+      <pds-table-cell>Jane Smith</pds-table-cell>
+      <pds-table-cell>jane.smith@example.com</pds-table-cell>
+      <pds-table-cell>Not Subscribed</pds-table-cell>
+    </pds-table-row>
+    <pds-table-row>
+      <pds-table-cell>Michael Johnson</pds-table-cell>
+      <pds-table-cell>michael.johnson@example.com</pds-table-cell>
+      <pds-table-cell>Subscribed</pds-table-cell>
+    </pds-table-row>
+    <pds-table-row>
+      <pds-table-cell>Susan Brown</pds-table-cell>
+      <pds-table-cell>susan.brown@example.com</pds-table-cell>
+      <pds-table-cell>Not Subscribed</pds-table-cell>
+    </pds-table-row>
+    <pds-table-row>
+      <pds-table-cell>William Davis</pds-table-cell>
+      <pds-table-cell>william.davis@example.com</pds-table-cell>
+      <pds-table-cell>Subscribed</pds-table-cell>
+    </pds-table-row>
+    <pds-table-row>
+      <pds-table-cell>Mary Wilson</pds-table-cell>
+      <pds-table-cell>mary.wilson@example.com</pds-table-cell>
+      <pds-table-cell>Not Subscribed</pds-table-cell>
+    </pds-table-row>
+    <pds-table-row>
+      <pds-table-cell>James Lee</pds-table-cell>
+      <pds-table-cell>james.lee@example.com</pds-table-cell>
+      <pds-table-cell>Subscribed</pds-table-cell>
+    </pds-table-row>
+    <pds-table-row>
+      <pds-table-cell>Linda Hall</pds-table-cell>
+      <pds-table-cell>linda.hall@example.com</pds-table-cell>
+      <pds-table-cell>Not Subscribed</pds-table-cell>
+    </pds-table-row>
+  </pds-table-body>
+</pds-table>`;
+
+export const Default = BaseTemplate.bind();
+Default.args = {
+  compact: false,
+  componentId: 'default',
+  fixedColumn: false,
+  responsive: false,
+  selectable: false,
+};
+
+export const Compact = BaseTemplate.bind();
+Compact.args = {
+  compact: true,
+  componentId: 'compact',
+  fixedColumn: false,
+  responsive: false,
+  selectable: false,
+};
+
+export const Selectable = BaseTemplate.bind();
+Selectable.args = {
+  compact: false,
+  componentId: 'selectable',
+  fixedColumn: false,
+  responsive: false,
+  selectable: true,
+};
+
+export const Responsive = ResponsiveTemplate.bind();
+Responsive.args = {
+  compact: false,
+  componentId: 'responsive',
+  fixedColumn: false,
+  responsive: true,
+  selectable: false,
+};
+
+export const fixedColumn = ResponsiveTemplate.bind();
+fixedColumn.args = {
+  compact: false,
+  componentId: 'responsive',
+  fixedColumn: true,
+  responsive: true,
+  selectable: false,
+};
+
+export const Sortable = SortableTemplate.bind();
+Sortable.args = {
+  compact: false,
+  componentId: 'sortable',
+  fixedColumn: false,
+  responsive: false,
+  selectable: false,
+  sortable: true,
+};

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

@@ -0,0 +1,160 @@
+pds-tab {
+  --border-none: var(--pine-border-width-none);
+  --border-radius-availability: var(--pine-border-radius-100);
+  --border-radius-default: var(--pine-border-radius-125);
+  --border-radius-none: var(--pine-border-radius-0);
+  --box-shadow-focus: 0 0 0 2px var(--pine-color-blue-200);
+  --color-background-active: var(--pine-color-charcoal-400);
+  --color-background-availability: var(--pine-color-white);
+  --color-background-default: var(--pine-color-grey-300);
+  --color-background-hover: var(--pine-color-grey-400);
+  --color-text-active: var(--pine-color-charcoal-400);
+  --color-text-active-inverse: var(--pine-color-white);
+  --color-text-default: var(--pine-color-charcoal-200);
+  --color-text-focus: var(--pine-color-charcoal-300);
+  --font-size-availability-content: var(--pine-font-size-075);
+  --font-size-default: var(--pine-font-size-100);
+  --font-size-filter-content: var(--pine-font-size-087);
+  --font-weight-default: var(--pine-font-weight-medium);
+  --line-height-availability-content: var(--pine-line-height-100);
+  --line-height-default: var(--pine-line-height-150);
+  --line-height-filter-content: var(--pine-line-height-125);
+  --outline: 4px solid var(--pine-color-blue-200);
+  --spacing-padding-none: var(--pine-spacing-0);
+  display: inline-block;
+  position: relative;
+}
+
+.pds-tab {
+  appearance: none;
+  background-color: transparent;
+  border: var(--border-none);
+  box-shadow: none;
+  color: inherit;
+  cursor: pointer;
+  font-family: inherit;
+  padding: var(--spacing-padding-none);
+  align-items: center;
+  color: var(--color-text-default);
+  display: inline-flex;
+  position: relative;
+  text-decoration: none;
+  white-space: nowrap;
+}
+.pds-tab.is-active, .pds-tab[aria-selected=true] {
+  color: var(--color-text-active);
+}
+.pds-tab.is-active .pds-tab__content::after, .pds-tab[aria-selected=true] .pds-tab__content::after {
+  opacity: 1;
+}
+.pds-tab:hover {
+  color: var(--color-text-active);
+}
+.pds-tab:focus-visible {
+  box-shadow: var(--box-shadow-focus);
+  outline: none;
+}
+.pds-tab .pds-tab__content {
+  font-family: inherit;
+  font-size: var(--font-size-default);
+  font-weight: var(--font-weight-default);
+  line-height: var(--line-height-default);
+  padding-block-end: 11px;
+  position: relative;
+}
+.pds-tab .pds-tab__content::after {
+  background-color: currentColor;
+  bottom: 0;
+  content: "";
+  height: 3px;
+  left: 0;
+  opacity: 0;
+  position: absolute;
+  right: 0;
+}
+.pds-tab .pds-tab-edge {
+  display: none;
+}
+
+.pds-tabs--availability {
+  --color-background-tab: transparent;
+}
+.pds-tabs--availability .pds-tab {
+  background-color: var(--color-background-tab);
+  border-radius: var(--border-radius-availability) var(--border-radius-availability) var(--border-radius-none) var(--border-radius-none);
+  padding: 8px 16px 13px;
+}
+.pds-tabs--availability .pds-tab.is-active, .pds-tabs--availability .pds-tab[aria-selected=true] {
+  --color-background-tab: var(--color-background-availability);
+}
+.pds-tabs--availability .pds-tab.is-active .pds-tab__content::after, .pds-tabs--availability .pds-tab[aria-selected=true] .pds-tab__content::after {
+  opacity: 1;
+}
+.pds-tabs--availability .pds-tab.is-active .pds-tab-edge, .pds-tabs--availability .pds-tab[aria-selected=true] .pds-tab-edge {
+  z-index: 1;
+}
+.pds-tabs--availability .pds-tab:hover:not(.is-active, [aria-selected=true]) {
+  --color-background-tab: var(--color-background-default);
+}
+.pds-tabs--availability .pds-tab:focus-visible {
+  color: var(--color-text-default);
+}
+.pds-tabs--availability .pds-tab__content {
+  font-size: var(--font-size-availability-content);
+  line-height: var(--line-height-availability-content);
+  padding-bottom: 7px;
+}
+.pds-tabs--availability .pds-tab-edge {
+  bottom: 0;
+  display: block;
+  height: 8px;
+  inset-inline-end: 100%;
+  overflow: hidden;
+  position: absolute;
+  width: 8px;
+}
+.pds-tabs--availability .pds-tab-edge::before {
+  border-radius: 50%;
+  bottom: 0;
+  box-shadow: 4px 4px 0 0 var(--color-background-tab);
+  content: "";
+  display: block;
+  height: 200%;
+  inset-inline-end: 0;
+  position: absolute;
+  width: 200%;
+}
+.pds-tabs--availability .pds-tab-edge--end {
+  inset-inline-end: unset;
+  inset-inline-start: 100%;
+}
+.pds-tabs--availability .pds-tab-edge--end::before {
+  box-shadow: -4px 4px 0 0 var(--color-background-tab);
+  inset-inline-end: unset;
+  inset-inline-start: 0;
+}
+
+.pds-tabs--filter {
+  --color-background-tab: var(--color-background-active);
+}
+.pds-tabs--filter .pds-tab {
+  background-color: var(--color-background-tab);
+  border-radius: 50px;
+  color: var(--color-text-active);
+  padding: 6px 15px;
+}
+.pds-tabs--filter .pds-tab.is-active, .pds-tabs--filter .pds-tab[aria-selected=true] {
+  --color-background-tab: var(--color-background-active);
+  color: var(--color-text-active-inverse);
+}
+.pds-tabs--filter .pds-tab:hover:not(.is-active, [aria-selected=true]) {
+  --color-background-tab: var(--color-background-hover);
+}
+.pds-tabs--filter .pds-tab__content {
+  font-size: var(--font-size-filter-content);
+  line-height: var(--line-height-filter-content);
+  padding-block-end: 0;
+}
+.pds-tabs--filter .pds-tab__content::after {
+  content: unset;
+}