@pine-ds/core 3.0.0-mercury.0 → 3.0.1

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

@@ -1 +1 @@
-{"version":3,"file":"pds-table.js","sourceRoot":"","sources":["../../../src/components/pds-table/pds-table.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, h, Prop, State, Listen } from '@stencil/core';\n\n@Component({\n  tag: 'pds-table',\n  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"]}
+{"version":3,"file":"pds-table.js","sourceRoot":"","sources":["../../../src/components/pds-table/pds-table.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, h, Prop, State, Listen } from '@stencil/core';\n\n@Component({\n  tag: 'pds-table',\n  styleUrls: ['pds-table.scss'],\n  shadow: true,\n})\nexport class PdsTable {\n  @Element() el: HTMLPdsTableElement;\n\n  /**\n   * Determines if the table displays with reduced table cell padding.\n   */\n  @Prop() compact: boolean;\n\n  /**\n   * A unique identifier used for the table `id` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Enables the table to be responsive by horizontally scrolling on smaller screens.\n   */\n  @Prop() responsive: boolean;\n\n  /**\n   * Determines if the should display a fixed first column.\n   */\n  @Prop() fixedColumn: boolean;\n\n  /**\n   * Determines if the table displays checkboxes for selectable rows.\n   */\n  @Prop() selectable: boolean;\n\n  /**\n   * The name of the column being sorted.\n   * @defaultValue null\n   */\n  @State() sortingColumn: string | null = null;\n\n  /**\n   * The direction of sorting.\n   * @defaultValue 'asc'\n   */\n  @State() sortingDirection: 'asc' | 'desc' = 'asc';\n\n\n  /**\n   * Event that is emitted when the checkbox is clicked, carrying the rowIndex and selected value.\n   */\n  @Event() pdsTableSelect: EventEmitter<{ rowIndex: number; isSelected: boolean }>;\n\n  /**\n   * Event that is emitted when the select all checkbox is clicked, carrying the selected value.\n   */\n  @Event() pdsTableSelectAll: EventEmitter<{ isSelected: boolean }>;\n\n  componentWillLoad() {\n    this.sortingColumn = null;\n  }\n\n  private classNames() {\n    const classNames = ['pds-table'];\n\n    if (this.compact) {\n      classNames.push('is-compact');\n    }\n\n    if (this.responsive) {\n      classNames.push('is-responsive');\n    }\n\n    return classNames.join('  ');\n  }\n\n  private sortTable(column: string, direction: 'asc' | 'desc') {\n    const tableBody = this.el.querySelector('pds-table-body');\n\n    // Get the rows in the table body\n    const tableRows = Array.from(tableBody.querySelectorAll('pds-table-row'));\n\n    // Find the column index based on the column name\n    const columnHeaderCells: HTMLElement[] = Array.from(\n      this.el.querySelectorAll('pds-table-head-cell[sortable]')\n    );\n\n    const columnHeaderCell = columnHeaderCells.find(\n      (cell) => cell.innerText.trim() === column\n    );\n\n    if (!columnHeaderCell) {\n      console.warn(`Column \"${column}\" not found.`);\n      return;\n    }\n\n    const columnIndex = columnHeaderCells.indexOf(columnHeaderCell);\n\n    // Sort the rows based on the content of the specified column\n    tableRows.sort((a, b) => {\n      const valueA = a.querySelector(`pds-table-cell:nth-child(${columnIndex + 1})`).textContent.trim();\n      const valueB = b.querySelector(`pds-table-cell:nth-child(${columnIndex + 1})`).textContent.trim();\n\n      if (direction === 'asc') {\n        return valueA.localeCompare(valueB);\n      } else {\n        return valueB.localeCompare(valueA);\n      }\n    });\n\n    // Clear and append the sorted rows back to the table body\n    tableBody.innerHTML = '';\n    tableRows.forEach((row) => {\n      tableBody.appendChild(row);\n    });\n  }\n\n  @Listen('pdsTableSort')\n  handleTableSort(event: CustomEvent<{ column: string; direction: 'asc' | 'desc' }>) {\n    const { direction } = event.detail;\n    this.sortTable(event.detail.column, direction);\n    this.sortingColumn = event.detail.column;\n    this.sortingDirection = direction;\n  }\n\n  @Listen('pdsTableSelectAll')\n  handleTableSelectAll(event: CustomEvent<{ isSelected: boolean }>) {\n    if (event.defaultPrevented) return;\n\n    const pdsTableBody = this.el.querySelector('pds-table-body');\n    const tableRows = Array.from(pdsTableBody.querySelectorAll('pds-table-row'));\n\n    tableRows.forEach((row) => {\n      row.isSelected = event.detail.isSelected;\n    });\n  }\n\n  @Listen('pdsTableRowSelected')\n  async handleTableSelect(event: CustomEvent<{ rowIndex: number; isSelected: boolean }>) {\n    if (event.defaultPrevented) return;\n\n    const allTableRows = this.el.querySelectorAll('pds-table-row');\n    const allSelectedRows = Array.from(allTableRows).every((row) => row.isSelected);\n    const noneSelectedRows = Array.from(allTableRows).every((row) => !row.isSelected);\n    const pdsTableHead = this.el.querySelector('pds-table-head');\n    if (!pdsTableHead) return;\n\n    const headerCheckbox = pdsTableHead.shadowRoot.querySelector('pds-checkbox');\n    headerCheckbox.checked = allSelectedRows;\n    headerCheckbox.indeterminate = !allSelectedRows && !noneSelectedRows;\n  }\n\n  render() {\n    return (\n      <Host\n        class={this.classNames()}\n        id={this.componentId}\n        role=\"grid\"\n        selectable={this.selectable}\n        tabindex=\"0\"\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

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

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

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

@@ -1,76 +1,59 @@
 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;
+  align-items: center;
+  display: inline-flex;
   position: relative;
 }
+.pds-tabs--pill pds-tab {
+  flex: 1;
+}
 
 .pds-tab {
   appearance: none;
   background-color: transparent;
-  border: var(--border-none);
+  border: var(--pine-border-width-none);
   box-shadow: none;
   color: inherit;
   cursor: pointer;
   font-family: inherit;
-  padding: var(--spacing-padding-none);
+  padding: var(--pine-dimension-none);
   align-items: center;
-  color: var(--color-text-default);
+  color: var(--pine-color-text-secondary);
   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);
+  color: var(--pine-color-text);
 }
 .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);
+  color: var(--pine-color-text);
 }
 .pds-tab:focus-visible {
-  box-shadow: var(--box-shadow-focus);
-  outline: none;
+  outline: var(--pine-outline-focus);
+  outline-offset: var(--pine-border-width);
 }
 .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);
+  font-family: var(--pine-font-family-body);
+  font-size: var(--pine-font-size);
+  font-weight: var(--pine-font-weight-medium);
+  letter-spacing: var(--pine-letter-spacing);
+  line-height: var(--pine-line-height-body);
   padding-block-end: 11px;
   position: relative;
 }
 .pds-tab .pds-tab__content::after {
-  background-color: currentColor;
-  bottom: 0;
+  background-color: var(--pine-color-brand);
   content: "";
   height: 3px;
-  left: 0;
+  inset-block-end: var(--pine-dimension-none);
+  inset-inline-end: var(--pine-dimension-none);
+  inset-inline-start: var(--pine-dimension-none);
   opacity: 0;
   position: absolute;
-  right: 0;
 }
 .pds-tab .pds-tab-edge {
   display: none;
@@ -81,11 +64,11 @@ pds-tab {
 }
 .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);
+  border-radius: calc(var(--pine-dimension-xs) * 1.25) calc(var(--pine-dimension-xs) * 1.25) var(--pine-dimension-none) var(--pine-dimension-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);
+  --color-background-tab: var(--pine-color-secondary);
 }
 .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;
@@ -94,15 +77,13 @@ pds-tab {
   z-index: 1;
 }
 .pds-tabs--availability .pds-tab:hover:not(.is-active, [aria-selected=true]) {
-  --color-background-tab: var(--color-background-default);
+  --color-background-tab: var(--pine-color-secondary-hover);
 }
 .pds-tabs--availability .pds-tab:focus-visible {
-  color: var(--color-text-default);
+  color: var(--pine-color-text-secondary);
 }
 .pds-tabs--availability .pds-tab__content {
-  font-size: var(--font-size-availability-content);
-  line-height: var(--line-height-availability-content);
-  padding-bottom: 7px;
+  padding-block-end: 7px;
 }
 .pds-tabs--availability .pds-tab-edge {
   bottom: 0;
@@ -135,26 +116,60 @@ pds-tab {
 }
 
 .pds-tabs--filter {
-  --color-background-tab: var(--color-background-active);
+  --color-background-tab: var(--pine-color-background-container);
 }
 .pds-tabs--filter .pds-tab {
   background-color: var(--color-background-tab);
   border-radius: 50px;
-  color: var(--color-text-active);
+  color: var(--pine-color-text);
   padding: 6px 15px;
 }
 .pds-tabs--filter .pds-tab.is-active, .pds-tabs--filter .pds-tab[aria-selected=true] {
-  --color-background-tab: var(--color-background-active);
-  color: var(--color-text-active-inverse);
+  --color-background-tab: var(--pine-color-primary);
+  color: var(--pine-color-text-primary);
 }
 .pds-tabs--filter .pds-tab:hover:not(.is-active, [aria-selected=true]) {
-  --color-background-tab: var(--color-background-hover);
+  --color-background-tab: var(--pine-color-background-container-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;
+  padding-block-end: var(--pine-dimension-none);
 }
 .pds-tabs--filter .pds-tab__content::after {
   content: unset;
+}
+
+.pds-tabs--pill {
+  --color-background-tab: transparent;
+}
+.pds-tabs--pill .pds-tab {
+  background-color: var(--color-background-tab);
+  border: var(--pine-border-width-thin) solid transparent;
+  border-radius: var(--pine-dimension-xs);
+  color: var(--pine-color-text-readonly);
+  flex: 1;
+  height: 34px;
+  justify-content: center;
+}
+.pds-tabs--pill .pds-tab .pds-tab__content {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  padding-block-end: 0;
+}
+.pds-tabs--pill .pds-tab.is-active, .pds-tabs--pill .pds-tab[aria-selected=true] {
+  --color-background-tab: var(--pine-color-white);
+  border-color: var(--pine-color-border);
+  box-shadow: var(--pine-box-shadow-100);
+  color: var(--pine-color-text-active);
+  z-index: 1;
+  /* stylelint-disable max-nesting-depth */
+  /* stylelint-enable max-nesting-depth */
+}
+.pds-tabs--pill .pds-tab.is-active:focus-visible, .pds-tabs--pill .pds-tab[aria-selected=true]:focus-visible {
+  border-color: var(--color-border-focus);
+  outline: var(--pine-outline-focus);
+  outline-offset: var(--pine-border-width);
+}
+.pds-tabs--pill .pds-tab.is-active .pds-tab__content::after, .pds-tabs--pill .pds-tab[aria-selected=true] .pds-tab__content::after {
+  opacity: 0;
 }

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

@@ -1,19 +1,19 @@
 import { Host, h } from "@stencil/core";
 export class PdsTab {
     constructor() {
-        this.name = undefined;
-        this.parentComponentId = undefined;
-        this.variant = undefined;
-        this.index = undefined;
+        /**
+         * Keeps track of the tabpanel selected state, this property is passed by parent component
+         */
+        /** @internal */
         this.selected = false;
     }
     onTabClick(index, parentComponentId) {
         this.pdsTabClick.emit([index, parentComponentId]);
     }
     render() {
-        const availabilityTabEdgeInlineStart = (h("span", { key: '5ea7f20d14e906993c0cfbef0ae9a37b305be9fd', class: "pds-tab-edge", role: "presentation" }));
-        const availabilityTabEdgeInlineEnd = (h("span", { key: '9fc8287a57fd777472d9f909a451332b7edd8c39', class: "pds-tab-edge pds-tab-edge--end", role: "presentation" }));
-        return (h(Host, { key: '16d11c4bda123cbb698674c560dc7c826fe653ca', variant: this.variant, slot: "tabs", index: this.index }, h("button", { key: '63e18d48cd1206c87e520cbe85c09e7fbd8752f0', role: "tab", id: this.parentComponentId + "__" + this.name, "aria-controls": this.parentComponentId + "__" + this.name + "-panel", tabindex: this.selected ? "0" : "-1", "aria-selected": this.selected ? "true" : "false", class: this.selected ? "pds-tab is-active" : "pds-tab", onClick: this.onTabClick.bind(this, this.index, this.parentComponentId) }, this.variant === "availability" && availabilityTabEdgeInlineStart, this.variant === "availability" && availabilityTabEdgeInlineEnd, h("div", { key: '5db0ed6e01b1cfe58f47669b369bb72bd3caa033', class: "pds-tab__content" }, h("slot", { key: '1737f4b6a524cf165deb1eb1a2627ae834a76be2' })))));
+        const availabilityTabEdgeInlineStart = (h("span", { key: 'f03f2a822bc603cf61483202ae9a249b8586ed02', class: "pds-tab-edge", role: "presentation" }));
+        const availabilityTabEdgeInlineEnd = (h("span", { key: 'ccf11be9b997f174b555021cd50e07a4128c7182', class: "pds-tab-edge pds-tab-edge--end", role: "presentation" }));
+        return (h(Host, { key: '8643374d23c0e3329f4f39f4ee5c025f95a06b30', variant: this.variant, slot: "tabs", index: this.index }, h("button", { key: '469df7696312659dd0af97561fb92aad22f054c0', role: "tab", id: this.parentComponentId + "__" + this.name, "aria-controls": this.parentComponentId + "__" + this.name + "-panel", tabindex: this.selected ? "0" : "-1", "aria-selected": this.selected ? "true" : "false", class: this.selected ? "pds-tab is-active" : "pds-tab", onClick: this.onTabClick.bind(this, this.index, this.parentComponentId) }, this.variant === "availability" && availabilityTabEdgeInlineStart, this.variant === "availability" && availabilityTabEdgeInlineEnd, h("div", { key: 'e759f2c4d52db51f0b92bf4424bcc42d6b266e37', class: "pds-tab__content" }, h("slot", { key: '88226acf10ef132470aeefad0459dd377609b325' })))));
     }
     static get is() { return "pds-tab"; }
     static get originalStyleUrls() {
@@ -42,6 +42,8 @@ export class PdsTab {
                     "tags": [],
                     "text": "Sets the related tab name, this name must match a `pds-tabpanel`'s tab name property"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "name",
                 "reflect": false
             },
@@ -62,6 +64,8 @@ export class PdsTab {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "parent-component-id",
                 "reflect": false
             },
@@ -82,6 +86,8 @@ export class PdsTab {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "variant",
                 "reflect": false
             },
@@ -102,6 +108,8 @@ export class PdsTab {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "index",
                 "reflect": false
             },
@@ -122,6 +130,8 @@ export class PdsTab {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "selected",
                 "reflect": false,
                 "defaultValue": "false"

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

@@ -1 +1 @@
-{"version":3,"file":"pds-tab.js","sourceRoot":"","sources":["../../../../src/components/pds-tabs/pds-tab/pds-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAOvF,MAAM,OAAO,MAAM;;;;;;wBA8BE,KAAK;;IAOhB,UAAU,CAAC,KAAK,EAAE,iBAAiB;QACzC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC;IACpD,CAAC;IAED,MAAM;QACJ,MAAM,8BAA8B,GAAG,CACrC,6DAAM,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,cAAc,GAAQ,CACvD,CAAA;QAED,MAAM,4BAA4B,GAAG,CACnC,6DAAM,KAAK,EAAC,gCAAgC,EAAC,IAAI,EAAC,cAAc,GAAQ,CACzE,CAAA;QAED,OAAO,CACL,EAAC,IAAI,qDAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK;YACxD,+DACE,IAAI,EAAC,KAAK,EACV,EAAE,EAAE,IAAI,CAAC,iBAAiB,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,mBAC9B,IAAI,CAAC,iBAAiB,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,QAAQ,EACnE,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,mBACrB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAC/C,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,SAAS,EACtD,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,iBAAiB,CAAC;gBAEtE,IAAI,CAAC,OAAO,KAAK,cAAc,IAAI,8BAA8B;gBACjE,IAAI,CAAC,OAAO,KAAK,cAAc,IAAI,4BAA4B;gBAChE,4DAAK,KAAK,EAAC,kBAAkB;oBAAC,8DAAO,CAAM,CACpC,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'pds-tab',\n  styleUrl: 'pds-tab.scss',\n  shadow: false,\n})\nexport class PdsTab {\n  @Element() el: HTMLPdsTabElement;\n\n  /**\n   * Sets the related tab name, this name must match a `pds-tabpanel`'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 if the tab index number, this property is passed by parent component\n   */\n  /** @internal */\n  @Prop() index: number;\n\n  /**\n   * Keeps track of the tabpanel selected state, this property is passed by parent component\n   */\n  /** @internal */\n  @Prop() selected = false;\n\n  /**\n   * Emits an event upon tab click for `pds-tab` and `pds-tabpanel` to listen for\n   */\n  /** @internal */\n  @Event() pdsTabClick: EventEmitter<object>;\n  private onTabClick(index, parentComponentId) {\n    this.pdsTabClick.emit([index, parentComponentId]);\n  }\n\n  render() {\n    const availabilityTabEdgeInlineStart = (\n      <span class=\"pds-tab-edge\" role=\"presentation\"></span>\n    )\n\n    const availabilityTabEdgeInlineEnd = (\n      <span class=\"pds-tab-edge pds-tab-edge--end\" role=\"presentation\"></span>\n    )\n\n    return (\n      <Host variant={this.variant} slot=\"tabs\" index={this.index}>\n        <button\n          role=\"tab\"\n          id={this.parentComponentId + \"__\" + this.name}\n          aria-controls={this.parentComponentId + \"__\" + this.name + \"-panel\"}\n          tabindex={this.selected ? \"0\" : \"-1\"}\n          aria-selected={this.selected ? \"true\" : \"false\"}\n          class={this.selected ? \"pds-tab is-active\" : \"pds-tab\"}\n          onClick={this.onTabClick.bind(this, this.index, this.parentComponentId)}\n        >\n          {this.variant === \"availability\" && availabilityTabEdgeInlineStart}\n          {this.variant === \"availability\" && availabilityTabEdgeInlineEnd}\n          <div class=\"pds-tab__content\"><slot/></div>\n        </button>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pds-tab.js","sourceRoot":"","sources":["../../../../src/components/pds-tabs/pds-tab/pds-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAOvF,MAAM,OAAO,MAAM;IALnB;QA+BE;;WAEG;QACH,gBAAgB;QACR,aAAQ,GAAG,KAAK,CAAC;KAsC1B;IA/BS,UAAU,CAAC,KAAK,EAAE,iBAAiB;QACzC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC;IACpD,CAAC;IAED,MAAM;QACJ,MAAM,8BAA8B,GAAG,CACrC,6DAAM,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,cAAc,GAAQ,CACvD,CAAA;QAED,MAAM,4BAA4B,GAAG,CACnC,6DAAM,KAAK,EAAC,gCAAgC,EAAC,IAAI,EAAC,cAAc,GAAQ,CACzE,CAAA;QAED,OAAO,CACL,EAAC,IAAI,qDAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK;YACxD,+DACE,IAAI,EAAC,KAAK,EACV,EAAE,EAAE,IAAI,CAAC,iBAAiB,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,mBAC9B,IAAI,CAAC,iBAAiB,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,QAAQ,EACnE,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,mBACrB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAC/C,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,SAAS,EACtD,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,iBAAiB,CAAC;gBAEtE,IAAI,CAAC,OAAO,KAAK,cAAc,IAAI,8BAA8B;gBACjE,IAAI,CAAC,OAAO,KAAK,cAAc,IAAI,4BAA4B;gBAChE,4DAAK,KAAK,EAAC,kBAAkB;oBAAC,8DAAO,CAAM,CACpC,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'pds-tab',\n  styleUrl: 'pds-tab.scss',\n  shadow: false,\n})\nexport class PdsTab {\n  @Element() el: HTMLPdsTabElement;\n\n  /**\n   * Sets the related tab name, this name must match a `pds-tabpanel`'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 if the tab index number, this property is passed by parent component\n   */\n  /** @internal */\n  @Prop() index: number;\n\n  /**\n   * Keeps track of the tabpanel selected state, this property is passed by parent component\n   */\n  /** @internal */\n  @Prop() selected = false;\n\n  /**\n   * Emits an event upon tab click for `pds-tab` and `pds-tabpanel` to listen for\n   */\n  /** @internal */\n  @Event() pdsTabClick: EventEmitter<object>;\n  private onTabClick(index, parentComponentId) {\n    this.pdsTabClick.emit([index, parentComponentId]);\n  }\n\n  render() {\n    const availabilityTabEdgeInlineStart = (\n      <span class=\"pds-tab-edge\" role=\"presentation\"></span>\n    )\n\n    const availabilityTabEdgeInlineEnd = (\n      <span class=\"pds-tab-edge pds-tab-edge--end\" role=\"presentation\"></span>\n    )\n\n    return (\n      <Host variant={this.variant} slot=\"tabs\" index={this.index}>\n        <button\n          role=\"tab\"\n          id={this.parentComponentId + \"__\" + this.name}\n          aria-controls={this.parentComponentId + \"__\" + this.name + \"-panel\"}\n          tabindex={this.selected ? \"0\" : \"-1\"}\n          aria-selected={this.selected ? \"true\" : \"false\"}\n          class={this.selected ? \"pds-tab is-active\" : \"pds-tab\"}\n          onClick={this.onTabClick.bind(this, this.index, this.parentComponentId)}\n        >\n          {this.variant === \"availability\" && availabilityTabEdgeInlineStart}\n          {this.variant === \"availability\" && availabilityTabEdgeInlineEnd}\n          <div class=\"pds-tab__content\"><slot/></div>\n        </button>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,19 @@
+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-tab'),
+  component: 'pds-tab',
+  decorators: [withActions],
+  title: 'components/Tabs/Tab',
+}
+
+const BaseTemplate = (args) => html`
+<pds-tabs active-tab-name="Sturdy" variant="primary" component-id="primary" tablist-label="Foo">
+  <pds-tab name="${args.name}">Sturdy</pds-tab>
+  <pds-tabpanel name="Sturdy">Content Sturdy</pds-tabpanel>
+</pds-tabs>
+`;
+
+export const Default = BaseTemplate.bind({});

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

@@ -4,8 +4,12 @@
 
 .pds-tabpanel {
   display: none;
-  margin-top: var(--spacing-panel-margin-top);
-  padding: var(--spacing-panel-padding);
+  margin-top: var(--tabs-dimension-panel-margin-top);
+  padding: var(--tabs-dimension-panel-padding);
+}
+.pds-tabpanel:focus-visible {
+  outline: var(--pine-outline-focus);
+  outline-offset: var(--pine-border-width);
 }
 .pds-tabpanel.is-active {
   display: block;

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

@@ -1,13 +1,14 @@
 import { Host, h } from "@stencil/core";
 export class PdsTabpanel {
     constructor() {
-        this.name = undefined;
-        this.parentComponentId = undefined;
-        this.variant = undefined;
-        this.selected = false;
+        /**
+         * Keeps track of the tabpanel selected state, this property is passed by parent component
+         */
+        /** @internal */
+        this.selected = false; // eslint-disable-line @stencil-community/strict-mutable
     }
     render() {
-        return (h(Host, { key: 'b071d63a6211e70b09f11a18609d15728eb485c6', slot: "tabpanels" }, h("div", { key: 'ab8de65d7142136888c853170b7b8b190f21abcc', 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: '0cac8366d5502be7033d1b71b681bf564aa557e8' }))));
+        return (h(Host, { key: 'aef4969e26b1f6e98eebdba3bcfe7bebe2d75e52', slot: "tabpanels" }, h("div", { key: 'e90ebc7253b40a7c9d5e120584e8887855d3730c', 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: '79d03b545cf3fc73c54d660eb46661d5d1adbe64' }))));
     }
     static get is() { return "pds-tabpanel"; }
     static get originalStyleUrls() {
@@ -36,6 +37,8 @@ export class PdsTabpanel {
                     "tags": [],
                     "text": "Sets the related tab name, this name must match a `pds-tab`'s tab name property"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "name",
                 "reflect": false
             },
@@ -56,6 +59,8 @@ export class PdsTabpanel {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "parent-component-id",
                 "reflect": false
             },
@@ -76,6 +81,8 @@ export class PdsTabpanel {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "variant",
                 "reflect": false
             },
@@ -96,6 +103,8 @@ export class PdsTabpanel {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "selected",
                 "reflect": false,
                 "defaultValue": "false"

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

@@ -1 +1 @@
-{"version":3,"file":"pds-tabpanel.js","sourceRoot":"","sources":["../../../../src/components/pds-tabs/pds-tabpanel/pds-tabpanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOlE,MAAM,OAAO,WAAW;;;;;wBAwBY,KAAK;;IAEvC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,WAAW;YACpB,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,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,cAAc;gBAEhE,8DAAQ,CACJ,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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,"file":"pds-tabpanel.js","sourceRoot":"","sources":["../../../../src/components/pds-tabs/pds-tabpanel/pds-tabpanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOlE,MAAM,OAAO,WAAW;IALxB;QAyBE;;WAEG;QACH,gBAAgB;QACO,aAAQ,GAAG,KAAK,CAAC,CAAU,wDAAwD;KAiB3G;IAfC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,WAAW;YACpB,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,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,cAAc;gBAEhE,8DAAQ,CACJ,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}

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

@@ -0,0 +1,19 @@
+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-tabpanel'),
+  component: 'pds-tabpanel',
+  decorators: [withActions],
+  title: 'components/Tabs/Tabpanel',
+}
+
+const BaseTemplate = (args) => html`
+<pds-tabs active-tab-name="Sturdy" variant="primary" component-id="primary" tablist-label="Foo">
+  <pds-tab name="Sturdy">Sturdy</pds-tab>
+  <pds-tabpanel name="${args.name}">Content Sturdy</pds-tabpanel>
+</pds-tabs>
+`;
+
+export const Default = BaseTemplate.bind({});

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

@@ -1,29 +1,35 @@
 :host {
   /**
-   * @prop --spacing-panel-margin-top: Optional margin-top for panels
+   * @prop --tabs-dimension-panel-margin-top: Optional margin-top for panels
    */
-  --spacing-panel-margin-top: 0;
+  --tabs-dimension-panel-margin-top: var(--pine-dimension-none);
   /**
-   * @prop --spacing-panel-padding: Optional padding for panels
+   * @prop --tabs-dimension-panel-padding: Optional padding for panels
    */
-  --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);
+  --tabs-dimension-panel-padding: 0;
   display: block;
 }
 
 .pds-tabs__tablist {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--spacing-gap-default);
+  gap: var(--pine-dimension-md);
 }
 
 :host(.pds-tabs--availability) .pds-tabs__tablist {
-  gap: var(--spacing-gap-availability);
+  gap: var(--pine-dimension-xs);
 }
 
 :host(.pds-tabs--filter) .pds-tabs__tablist {
-  gap: var(--spacing-gap-filter);
+  gap: var(--pine-dimension-sm);
+}
+
+:host(.pds-tabs--pill) .pds-tabs__tablist {
+  background-color: var(--pine-color-grey-100);
+  border: var(--pine-border-width-thin) solid var(--pine-color-grey-200);
+  border-radius: var(--pine-dimension-100);
+  display: inline-flex;
+  display: flex;
+  gap: 0;
+  height: var(--pine-dimension-450);
 }

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

@@ -4,13 +4,6 @@ import { Host, h } from "@stencil/core";
 * @slot tabpanels - Content is placed directly after the `div[role="tablist"]` element as siblings
 */
 export class PdsTabs {
-    constructor() {
-        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];
@@ -83,7 +76,7 @@ export class PdsTabs {
         this.passPropsToChildren();
     }
     render() {
-        return (h(Host, { key: 'a36e242d5e746954f80778cf515879ca82258978', "active-tab-name": this.activeTabName, class: this.classNames(), id: this.componentId }, h("div", { key: 'd6d89fd90a9a534f249c549e34308ed245773f60', class: "pds-tabs__tablist", role: "tablist", "aria-label": this.tablistLabel }, h("slot", { key: '9b5e5268c27ecf2a5331cec64d2c7121cef366a1', name: "tabs" })), h("slot", { key: 'b835cf1befe68f54b1751a976846d271ce97634e', name: "tabpanels" })));
+        return (h(Host, { key: '33e22ebb5d4ae476cef5c4c95cb455b1c54fd083', "active-tab-name": this.activeTabName, class: this.classNames(), id: this.componentId }, h("div", { key: '7219b9019640a50cfae5442b36ece10aff6a5e51', class: "pds-tabs__tablist", role: "tablist", "aria-label": this.tablistLabel }, h("slot", { key: '32e2c4f0a1feec88f3693c720019b548932687ff', name: "tabs" })), h("slot", { key: '6235cfb2ef48346a96239c4a619c3ae900f6101e', name: "tabpanels" })));
     }
     static get is() { return "pds-tabs"; }
     static get encapsulation() { return "shadow"; }
@@ -113,6 +106,8 @@ export class PdsTabs {
                     "tags": [],
                     "text": "Sets the aria-label attached to the tablist element"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "tablist-label",
                 "reflect": false
             },
@@ -130,6 +125,8 @@ export class PdsTabs {
                     "tags": [],
                     "text": "A unique identifier used for the underlying component `id` attribute."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "component-id",
                 "reflect": false
             },
@@ -137,8 +134,8 @@ export class PdsTabs {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'primary' | 'availability' | 'filter'",
-                    "resolved": "\"availability\" | \"filter\" | \"primary\"",
+                    "original": "'primary' | 'availability' | 'filter' | 'pill'",
+                    "resolved": "\"availability\" | \"filter\" | \"pill\" | \"primary\"",
                     "references": {}
                 },
                 "required": true,
@@ -147,6 +144,8 @@ export class PdsTabs {
                     "tags": [],
                     "text": "Sets tabs variant styles as outlined in Figma documentation"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "variant",
                 "reflect": false
             },
@@ -164,6 +163,8 @@ export class PdsTabs {
                     "tags": [],
                     "text": "Sets the starting active tab name and maintains the name as the component re-renders"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "active-tab-name",
                 "reflect": false
             },
@@ -184,6 +185,8 @@ export class PdsTabs {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "active-tab-index",
                 "reflect": false
             }

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

@@ -1 +1 @@
-{"version":3,"file":"pds-tabs.js","sourceRoot":"","sources":["../../../src/components/pds-tabs/pds-tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["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,"file":"pds-tabs.js","sourceRoot":"","sources":["../../../src/components/pds-tabs/pds-tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["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  styleUrls: ['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' | 'pill';\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"]}