@pine-ds/core 1.2.0 → 1.3.0-dev.0

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

@@ -1,248 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,227 +0,0 @@
-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

@@ -1,160 +0,0 @@
-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;
-}