@pine-ds/core 4.0.0-mercury.0 → 4.1.0

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

@@ -1,28 +1,65 @@
 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'],
+  parameters: {},
+  title: 'components/Table',
+  argTypes: {
+    border: {
+      control: { type: 'boolean' },
+      description: 'Adds top and bottom borders to the table head',
+      table: {
+        category: 'Table Head',
+      },
+    },
+    background: {
+      control: { type: 'boolean' },
+      description: 'Adds a subtle background color to the table head',
+      table: {
+        category: 'Table Head',
+      },
+    },
+    rowDividers: {
+      control: { type: 'boolean' },
+      description: 'Adds divider borders between table rows. The last row will not have a bottom border',
+    },
+    disableSelectAll: {
+      control: { type: 'boolean' },
+      description: 'Hides the select-all checkbox in the table header while keeping individual row checkboxes functional. Only applies when selectable is true.',
+    },
+    defaultSortColumn: {
+      control: { type: 'text' },
+      description: 'The name of the column to sort by on initial load. Must match the text content of a sortable column header.',
+      table: {
+        category: 'Sorting',
+      },
+    },
+    defaultSortDirection: {
+      control: { type: 'select' },
+      options: ['asc', 'desc'],
+      description: 'The direction to sort the default column on initial load.',
+      table: {
+        category: 'Sorting',
+      },
     },
   },
-  title: 'components/Table',
 };
 
 const BaseTemplate = (args) => html`
 <pds-table
-  compact="${args.compact}"
+  ?compact=${args.compact}
   component-id="${args.componentId}"
-  fixed-column="${args.fixedColumn}"
-  responsive="${args.responsive}"
-  selectable="${args.selectable}"
+  ?fixed-column=${args.fixedColumn}
+  ?responsive=${args.responsive}
+  ?row-dividers=${args.rowDividers}
+  ?selectable=${args.selectable}
+  ?disable-select-all=${args.disableSelectAll}
 >
-  <pds-table-head>
+  <pds-table-head
+    ?border=${args.border}
+    ?background=${args.background}
+  >
     <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>
@@ -46,16 +83,59 @@ const BaseTemplate = (args) => html`
   </pds-table-body>
 </pds-table>`;
 
+const AlignmentTemplate = (args) => html`
+<pds-table
+  ?compact=${args.compact}
+  component-id="${args.componentId}"
+  ?fixed-column=${args.fixedColumn}
+  ?responsive=${args.responsive}
+  ?row-dividers=${args.rowDividers}
+  ?selectable=${args.selectable}
+>
+  <pds-table-head
+    ?border=${args.border}
+    ?background=${args.background}
+  >
+    <pds-table-head-cell cell-align="start">Name</pds-table-head-cell>
+    <pds-table-head-cell cell-align="center">Amount</pds-table-head-cell>
+    <pds-table-head-cell cell-align="end">Status</pds-table-head-cell>
+    <pds-table-head-cell cell-align="justify">Description</pds-table-head-cell>
+  </pds-table-head>
+  <pds-table-body>
+    <pds-table-row>
+      <pds-table-cell cell-align="start">John Doe</pds-table-cell>
+      <pds-table-cell cell-align="center">$1,234.56</pds-table-cell>
+      <pds-table-cell cell-align="end">Active</pds-table-cell>
+      <pds-table-cell cell-align="justify">This is a longer description that demonstrates justified text alignment in table cells. It shows how text wraps and aligns within the cell boundaries.</pds-table-cell>
+    </pds-table-row>
+    <pds-table-row>
+      <pds-table-cell cell-align="start">Jane Smith</pds-table-cell>
+      <pds-table-cell cell-align="center">$987.65</pds-table-cell>
+      <pds-table-cell cell-align="end">Inactive</pds-table-cell>
+      <pds-table-cell cell-align="justify">Another example of justified text that spans multiple lines to show the alignment behavior in table cells with varying content lengths.</pds-table-cell>
+    </pds-table-row>
+    <pds-table-row>
+      <pds-table-cell cell-align="start">Michael Johnson</pds-table-cell>
+      <pds-table-cell cell-align="center">$2,468.13</pds-table-cell>
+      <pds-table-cell cell-align="end">Pending</pds-table-cell>
+      <pds-table-cell cell-align="justify">Short justified text example.</pds-table-cell>
+    </pds-table-row>
+  </pds-table-body>
+</pds-table>`;
+
 const ResponsiveTemplate = (args) => html`
 <pds-table
-  compact="${args.compact}"
+  ?compact=${args.compact}
   component-id="${args.componentId}"
-  fixed-column="${args.fixedColumn}"
-  responsive="${args.responsive}"
-  selectable="${args.selectable}"
+  ?fixed-column=${args.fixedColumn}
+  ?responsive=${args.responsive}
+  ?row-dividers=${args.rowDividers}
+  ?selectable=${args.selectable}
 >
-  <pds-table-head>
-    <pds-table-head-cell>Column Title</pds-table-head-cell>
+  <pds-table-head
+    ?border=${args.border}
+    ?background=${args.background}
+  >
     <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>
@@ -67,6 +147,7 @@ const ResponsiveTemplate = (args) => html`
     <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>Actions</pds-table-head-cell>
   </pds-table-head>
   <pds-table-body>
     <pds-table-row value="responsive1">
@@ -81,7 +162,15 @@ const ResponsiveTemplate = (args) => html`
       <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-cell>
+        <pds-dropdown-menu placement="bottom-end">
+          <pds-button slot="trigger" size="sm" variant="icon-only"><pds-icon name="dot-menu-horizontal"></pds-icon></pds-button>
+          <pds-dropdown-menu-item>Edit</pds-dropdown-menu-item>
+          <pds-dropdown-menu-item>Duplicate</pds-dropdown-menu-item>
+          <pds-dropdown-menu-separator></pds-dropdown-menu-separator>
+          <pds-dropdown-menu-item destructive>Delete</pds-dropdown-menu-item>
+        </pds-dropdown-menu>
+      </pds-table-cell>
     </pds-table-row>
     <pds-table-row value="responsive2">
       <pds-table-cell>Row Item Alpha</pds-table-cell>
@@ -95,7 +184,15 @@ const ResponsiveTemplate = (args) => html`
       <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-cell>
+        <pds-dropdown-menu placement="bottom-end">
+          <pds-button slot="trigger" size="sm" variant="icon-only"><pds-icon name="dot-menu-horizontal"></pds-icon></pds-button>
+          <pds-dropdown-menu-item>Edit</pds-dropdown-menu-item>
+          <pds-dropdown-menu-item>Duplicate</pds-dropdown-menu-item>
+          <pds-dropdown-menu-separator></pds-dropdown-menu-separator>
+          <pds-dropdown-menu-item destructive>Delete</pds-dropdown-menu-item>
+        </pds-dropdown-menu>
+      </pds-table-cell>
     </pds-table-row>
     <pds-table-row value="responsive3">
       <pds-table-cell>Row Item Alpha</pds-table-cell>
@@ -109,20 +206,34 @@ const ResponsiveTemplate = (args) => html`
       <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-cell>
+        <pds-dropdown-menu placement="bottom-end">
+          <pds-button slot="trigger" size="sm" variant="icon-only"><pds-icon name="dot-menu-horizontal"></pds-icon></pds-button>
+          <pds-dropdown-menu-item>Edit</pds-dropdown-menu-item>
+          <pds-dropdown-menu-item>Duplicate</pds-dropdown-menu-item>
+          <pds-dropdown-menu-separator></pds-dropdown-menu-separator>
+          <pds-dropdown-menu-item destructive>Delete</pds-dropdown-menu-item>
+        </pds-dropdown-menu>
+      </pds-table-cell>
     </pds-table-row>
   </pds-table-body>
 </pds-table>`;
 
 const SortableTemplate = (args) => html`
 <pds-table
-  compact="${args.compact}"
+  ?compact=${args.compact}
   component-id="${args.componentId}"
-  fixed-column="${args.fixedColumn}"
-  responsive="${args.responsive}"
-  selectable="${args.selectable}"
+  ?fixed-column=${args.fixedColumn}
+  ?responsive=${args.responsive}
+  ?row-dividers=${args.rowDividers}
+  ?selectable=${args.selectable}
+  default-sort-column="${args.defaultSortColumn}"
+  default-sort-direction="${args.defaultSortDirection}"
 >
-  <pds-table-head>
+  <pds-table-head
+    ?border=${args.border}
+    ?background=${args.background}
+  >
     <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>
@@ -171,12 +282,75 @@ const SortableTemplate = (args) => html`
   </pds-table-body>
 </pds-table>`;
 
+const DefaultSortTemplate = (args) => html`
+<pds-table
+  ?compact=${args.compact}
+  component-id="${args.componentId}"
+  ?fixed-column=${args.fixedColumn}
+  ?responsive=${args.responsive}
+  ?row-dividers=${args.rowDividers}
+  ?selectable=${args.selectable}
+  default-sort-column="${args.defaultSortColumn}"
+  default-sort-direction="${args.defaultSortDirection}"
+>
+  <pds-table-head
+    ?border=${args.border}
+    ?background=${args.background}
+  >
+    <pds-table-head-cell sortable>Name</pds-table-head-cell>
+    <pds-table-head-cell sortable>Email</pds-table-head-cell>
+    <pds-table-head-cell sortable>Account</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>47321</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>89654</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>21578</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>63920</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>17436</pds-table-cell>
+    </pds-table-row>
+  </pds-table-body>
+</pds-table>`;
+
 export const Default = BaseTemplate.bind();
 Default.args = {
   compact: false,
   componentId: 'default',
   fixedColumn: false,
+  border: false,
+  background: false,
+  responsive: false,
+  rowDividers: false,
+  selectable: false,
+};
+
+export const Alignment = AlignmentTemplate.bind();
+Alignment.args = {
+  compact: false,
+  componentId: 'alignment',
+  fixedColumn: false,
+  border: false,
+  background: false,
   responsive: false,
+  rowDividers: false,
   selectable: false,
 };
 
@@ -185,7 +359,10 @@ Compact.args = {
   compact: true,
   componentId: 'compact',
   fixedColumn: false,
+  border: false,
+  background: false,
   responsive: false,
+  rowDividers: false,
   selectable: false,
 };
 
@@ -194,16 +371,35 @@ Selectable.args = {
   compact: false,
   componentId: 'selectable',
   fixedColumn: false,
+  border: false,
+  background: false,
   responsive: false,
+  rowDividers: false,
   selectable: true,
 };
 
+export const DisableSelectAll = BaseTemplate.bind();
+DisableSelectAll.args = {
+  compact: false,
+  componentId: 'selectable-no-select-all',
+  fixedColumn: false,
+  border: false,
+  background: false,
+  responsive: false,
+  rowDividers: false,
+  selectable: true,
+  disableSelectAll: true,
+};
+
 export const Responsive = ResponsiveTemplate.bind();
 Responsive.args = {
   compact: false,
   componentId: 'responsive',
   fixedColumn: false,
+  border: false,
+  background: false,
   responsive: true,
+  rowDividers: false,
   selectable: false,
 };
 
@@ -212,7 +408,10 @@ fixedColumn.args = {
   compact: false,
   componentId: 'responsive',
   fixedColumn: true,
+  border: false,
+  background: false,
   responsive: true,
+  rowDividers: false,
   selectable: false,
 };
 
@@ -221,7 +420,78 @@ Sortable.args = {
   compact: false,
   componentId: 'sortable',
   fixedColumn: false,
+  border: false,
+  background: false,
   responsive: false,
+  rowDividers: false,
   selectable: false,
   sortable: true,
+  defaultSortColumn: 'Name',
+  defaultSortDirection: 'asc',
+};
+
+export const DefaultSorting = DefaultSortTemplate.bind();
+DefaultSorting.args = {
+  compact: false,
+  componentId: 'default-sort',
+  fixedColumn: false,
+  border: false,
+  background: false,
+  responsive: false,
+  rowDividers: false,
+  selectable: false,
+  defaultSortColumn: 'Name',
+  defaultSortDirection: 'desc',
+};
+
+export const RowDividers = BaseTemplate.bind();
+RowDividers.args = {
+  compact: false,
+  componentId: 'row-dividers',
+  fixedColumn: false,
+  border: false,
+  background: false,
+  responsive: false,
+  rowDividers: true,
+  selectable: false,
+};
+
+const TruncateTemplate = (args) => html`
+<pds-table
+  component-id="truncate"
+  ?row-dividers=${args.rowDividers}
+>
+  <pds-table-head ?border=${args.border}>
+    <pds-table-head-cell>Name</pds-table-head-cell>
+    <pds-table-head-cell>Email</pds-table-head-cell>
+    <pds-table-head-cell>Description</pds-table-head-cell>
+    <pds-table-head-cell>Status</pds-table-head-cell>
+  </pds-table-head>
+  <pds-table-body>
+    <pds-table-row>
+      <pds-table-cell truncate>Jonathan Alexander Bartholomew III</pds-table-cell>
+      <pds-table-cell truncate>jonathan.alexander.bartholomew.iii@longcompanyname.example.com</pds-table-cell>
+      <pds-table-cell truncate>Senior Principal Staff Software Engineer, Platform Infrastructure & Developer Experience</pds-table-cell>
+      <pds-table-cell>Active</pds-table-cell>
+    </pds-table-row>
+    <pds-table-row>
+      <pds-table-cell truncate>Jane Smith</pds-table-cell>
+      <pds-table-cell truncate>jane@example.com</pds-table-cell>
+      <pds-table-cell truncate>Product Manager</pds-table-cell>
+      <pds-table-cell>Active</pds-table-cell>
+    </pds-table-row>
+    <pds-table-row>
+      <pds-table-cell truncate>Alexandra Christina Rodriguez-Fitzgerald</pds-table-cell>
+      <pds-table-cell truncate>alexandra.rodriguez-fitzgerald@international-enterprise-solutions.co.uk</pds-table-cell>
+      <pds-table-cell truncate>Vice President of Customer Success and Strategic Partnerships, EMEA Region</pds-table-cell>
+      <pds-table-cell>Pending</pds-table-cell>
+    </pds-table-row>
+  </pds-table-body>
+</pds-table>
+<pds-text tag="p" size="xs" color="secondary" gutter="sm">Hover over truncated cells to see the full content in a tooltip.</pds-text>`;
+
+export const Truncate = TruncateTemplate.bind();
+Truncate.args = {
+  border: true,
+  rowDividers: true,
 };

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

@@ -1,76 +1,66 @@
 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);
+.pds-tab:hover:not(:disabled, .is-disabled) {
+  color: var(--pine-color-text);
 }
-.pds-tab:focus-visible {
-  box-shadow: var(--box-shadow-focus);
+.pds-tab:focus {
   outline: none;
 }
+.pds-tab:focus-visible {
+  outline: var(--pine-outline-focus);
+  outline-offset: var(--pine-border-width);
+}
+.pds-tab:disabled, .pds-tab.is-disabled {
+  color: var(--pine-color-text-disabled);
+  cursor: not-allowed;
+}
 .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,28 +71,33 @@ 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);
+  color: var(--pine-color-text-secondary);
   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);
+  color: var(--pine-color-text);
 }
 .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;
+  z-index: var(--pine-z-index-raised);
 }
-.pds-tabs--availability .pds-tab:hover:not(.is-active, [aria-selected=true]) {
-  --color-background-tab: var(--color-background-default);
+.pds-tabs--availability .pds-tab:hover:not(.is-active, [aria-selected=true], :disabled, .is-disabled) {
+  --color-background-tab: var(--pine-color-secondary-hover);
+  color: var(--pine-color-text);
 }
 .pds-tabs--availability .pds-tab:focus-visible {
-  color: var(--color-text-default);
+  color: var(--pine-color-text-secondary);
+}
+.pds-tabs--availability .pds-tab:disabled, .pds-tabs--availability .pds-tab.is-disabled {
+  --color-background-tab: transparent;
+  color: var(--pine-color-text-disabled);
 }
 .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;
@@ -134,27 +129,74 @@ pds-tab {
   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);
+  background-color: var(--pine-color-background-muted);
   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);
+  background-color: var(--pine-color-primary);
+  color: var(--pine-color-text-primary);
+}
+.pds-tabs--filter .pds-tab.is-active:hover:not(:disabled, .is-disabled), .pds-tabs--filter .pds-tab[aria-selected=true]:hover:not(:disabled, .is-disabled) {
+  background-color: var(--pine-color-primary-hover);
+}
+.pds-tabs--filter .pds-tab:hover:not(.is-active, [aria-selected=true], :disabled, .is-disabled) {
+  background-color: var(--pine-color-border-disabled);
+}
+.pds-tabs--filter .pds-tab:disabled, .pds-tabs--filter .pds-tab.is-disabled {
+  background-color: transparent;
+  color: var(--pine-color-text-disabled);
 }
-.pds-tabs--filter .pds-tab:hover:not(.is-active, [aria-selected=true]) {
-  --color-background-tab: var(--color-background-hover);
+.pds-tabs--filter .pds-tab:disabled.is-active, .pds-tabs--filter .pds-tab:disabled[aria-selected=true], .pds-tabs--filter .pds-tab.is-disabled.is-active, .pds-tabs--filter .pds-tab.is-disabled[aria-selected=true] {
+  background-color: var(--pine-color-primary-disabled);
 }
 .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-muted);
+  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-background-container);
+  border-color: var(--pine-color-border);
+  box-shadow: var(--pine-box-shadow-100);
+  color: var(--pine-color-text-active);
+}
+.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-tabs--pill .pds-tab[aria-selected=true] {
+  /* stylelint-disable max-nesting-depth */
+}
+.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;
+}
+.pds-tabs--pill .pds-tab.is-active, .pds-tabs--pill .pds-tab[aria-selected=true] {
+  /* stylelint-enable max-nesting-depth */
+}
+.pds-tabs--pill .pds-tab:disabled, .pds-tabs--pill .pds-tab.is-disabled {
+  color: var(--pine-color-text-disabled);
 }