@pine-ds/core 3.6.0 → 3.7.0

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

@@ -43,7 +43,7 @@ export class PdsTableRow {
         }
     }
     render() {
-        return (h(Host, { key: '45de7019e5fe44cd27a02450205cf96429072db3', class: this.classNames(), role: "row", part: "row" }, this.tableRef && this.tableRef.selectable && (h("pds-table-cell", { key: '770cf9bcfff13b8de986d42f6ad6c249b4259191', part: this.tableRef.fixedColumn ? 'checkbox-cell' : 'checkbox-cell', class: this.tableRef.selectable ? 'has-checkbox' : '' }, h("pds-checkbox", { key: '5a1e28f23dda779862a310d83308396e14a839d6', componentId: this.generateUniqueId(), onClick: this.handleClick, indeterminate: this.indeterminate, label: "Select Row", hideLabel: true, checked: this.isSelected, part: "row-checkbox" }))), h("slot", { key: '7dd5716693ad855d1f072f0af9013ca4383bab5e' })));
+        return (h(Host, { key: 'cffeb199c48f2a06af70a2e5a5b41a21649c24c7', class: this.classNames(), role: "row", part: "row" }, this.tableRef && this.tableRef.selectable && (h("pds-table-cell", { key: '02a80cd54efe360550e636f7bc0f11e3de59af1c', part: this.tableRef.fixedColumn ? 'checkbox-cell' : 'checkbox-cell', class: this.tableRef.selectable ? 'has-checkbox' : '' }, h("pds-checkbox", { key: 'a8cd6c303ec35f71e0a97f130c5d53a2e81a3e4a', componentId: this.generateUniqueId(), onClick: this.handleClick, indeterminate: this.indeterminate, label: "Select Row", hideLabel: true, checked: this.isSelected, part: "row-checkbox" }))), h("slot", { key: '820a502627ffc329f650f7f0110e34ae3f096357' })));
     }
     static get is() { return "pds-table-row"; }
     static get encapsulation() { return "shadow"; }

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

@@ -32,6 +32,9 @@ pds-tab {
 .pds-tab:hover {
   color: var(--pine-color-text);
 }
+.pds-tab:focus {
+  outline: none;
+}
 .pds-tab:focus-visible {
   outline: var(--pine-outline-focus);
   outline-offset: var(--pine-border-width);

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

@@ -11,9 +11,9 @@ export class PdsTab {
         this.pdsTabClick.emit([index, parentComponentId]);
     }
     render() {
-        const availabilityTabEdgeInlineStart = (h("span", { key: 'f83448bc898dd4e94a7777d23c9565830dff0346', class: "pds-tab-edge", role: "presentation" }));
-        const availabilityTabEdgeInlineEnd = (h("span", { key: '5ff8d05f4cf140771706e7740c48e658208749dd', class: "pds-tab-edge pds-tab-edge--end", role: "presentation" }));
-        return (h(Host, { key: '874111fb5eedda9d021c8df0dc048aa771141a7c', variant: this.variant, slot: "tabs", index: this.index }, h("button", { key: 'a72dc4a32de38ae26bdba67cd91028dc955d4349', 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: '8e629e15312b7bd93c84d026b8b40f51a87479ca', class: "pds-tab__content" }, h("slot", { key: '2296b81a3abdd25cc9eb73d8fed5089466e21fc6' })))));
+        const availabilityTabEdgeInlineStart = (h("span", { key: '837cf57372db654f6ca411054446ebf0bc27b539', class: "pds-tab-edge", role: "presentation" }));
+        const availabilityTabEdgeInlineEnd = (h("span", { key: 'e15055442d56b50e6ac21bfb76fc0f599406a4fb', class: "pds-tab-edge pds-tab-edge--end", role: "presentation" }));
+        return (h(Host, { key: '1c02a1c8e5e562449ab954061a10acc3d54c3efc', variant: this.variant, slot: "tabs", index: this.index }, h("button", { key: '31b0e173dd738fa272dcaf4fc48a0581978f43b2', 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: '95b4f8d4c226e3b3a174d439816ec4d28cef0686', class: "pds-tab__content" }, h("slot", { key: '452a208775d54a290c0fcc6a69f6e546fde29afe' })))));
     }
     static get is() { return "pds-tab"; }
     static get originalStyleUrls() {

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

@@ -8,7 +8,7 @@ export class PdsTabpanel {
         this.selected = false; // eslint-disable-line @stencil-community/strict-mutable
     }
     render() {
-        return (h(Host, { key: '452260718e63155f0ce100b6d502b208fe0b8210', slot: "tabpanels" }, h("div", { key: 'dbf06166503b2890d827ac58f3481330f60edb5c', 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: '4785fa2a3781569b51e1947db5dd860b36e09ab5' }))));
+        return (h(Host, { key: '84aa81506200fd7f06a94a4c7570b2702b36d9e8', slot: "tabpanels" }, h("div", { key: '0e890243eb41ebda64183cc4fd559abf38f5dfdc', 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: 'aaabfd72a45f6cd52c9c279bf0c014315a659959' }))));
     }
     static get is() { return "pds-tabpanel"; }
     static get originalStyleUrls() {

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

@@ -2,6 +2,7 @@ import { Host, h } from "@stencil/core";
 /**
 * @slot tabs - Content is placed within the `div[role="tablist"]` element as children
 * @slot tabpanels - Content is placed directly after the `div[role="tablist"]` element as siblings
+* @part tab-list - Exposes the container element that holds all the tab buttons for styling.
 */
 export class PdsTabs {
     tabClickHandler(event) {
@@ -76,7 +77,7 @@ export class PdsTabs {
         this.passPropsToChildren();
     }
     render() {
-        return (h(Host, { key: 'e5b0d44fbe0df70a9260b5ce1ecabad9e5ce52da', "active-tab-name": this.activeTabName, class: this.classNames(), id: this.componentId }, h("div", { key: '4e987262ef8355b0a94f94ded397d72ccbb678f8', class: "pds-tabs__tablist", role: "tablist", "aria-label": this.tablistLabel }, h("slot", { key: 'f615e1d116f4c0f9ee28d172f64a05e755386ead', name: "tabs" })), h("slot", { key: 'f74280a78775d19fb1e94d522c28531d79ba73e3', name: "tabpanels" })));
+        return (h(Host, { key: '46ae07c28f9fb645e0e4a8165b5c3d2b0b9bdc4a', "active-tab-name": this.activeTabName, class: this.classNames(), id: this.componentId }, h("div", { key: 'ab3ea42f6998356ea4a089e07bbe49c6f8e45d54', class: "pds-tabs__tablist", role: "tablist", "aria-label": this.tablistLabel, part: "tab-list" }, h("slot", { key: 'e63be406b7d26ba2eff737d31fbc0d3bf959c99f', name: "tabs" })), h("slot", { key: 'cacce277c237acfff91b879ea90ba134cf7e2b80', name: "tabpanels" })));
     }
     static get is() { return "pds-tabs"; }
     static get encapsulation() { return "shadow"; }

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  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"]}
+{"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 * @part tab-list - Exposes the container element that holds all the tab buttons for styling.\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} part=\"tab-list\">\n          <slot name=\"tabs\" />\n        </div>\n        <slot name=\"tabpanels\" />\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -20,7 +20,7 @@ export class PdsText {
       ${this.weight !== undefined && this.weight.trim() !== '' ? `pds-text--weight-${this.weight}` : ''}
       ${this.decoration !== undefined && this.decoration.trim() !== '' ? `pds-text--decoration-${this.decoration}` : ''}
     `;
-        return (h(Tag, { key: '290b394545a5769f9d020922b31e14991148ebc7', style: this.color && setColor(this.color), class: typeClasses, part: "content" }, h("slot", { key: '0e64e2e05db073a5d0568f282acce4b9f06238cf' })));
+        return (h(Tag, { key: '101a42ae93ac81968a177c7e0d569417f376909c', style: this.color && setColor(this.color), class: typeClasses, part: "content" }, h("slot", { key: '903b04a19b948e04d577c8585a76647033b9c36e' })));
     }
     static get is() { return "pds-text"; }
     static get encapsulation() { return "shadow"; }

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

@@ -286,10 +286,10 @@ export class PdsTextarea {
     }
     render() {
         const value = this.getValue();
-        return (h(Host, { key: 'e1e17543442fcd240498b7f56ddb86e35ac1d770', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null }, h("div", { key: '5a69f6b67dcba5107aa9150fc87543e7638933bb', class: "pds-textarea" }, this.label &&
-            h("div", { key: '027592bca1595a85cdf24e8ab4201e6483fee80c', class: "pds-textarea__label-wrapper" }, h("label", { key: '815f18177b34893b9e76d8c0db7baa6b0f3400c5', htmlFor: this.componentId }, h("span", { key: '5fe5e5f984558c409d3a1c3e9fdb966038fcd4c4', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), !this.hideLabel && this.renderAction()), h("div", { key: 'd1d95ef8becd9648c8becc2fe6797432ed53ca81', class: "pds-textarea__field-wrapper" }, h("textarea", Object.assign({ key: 'd307adc2e75a381aae4dda4ad207bf3a670b7678', ref: (el) => this.nativeTextarea = el, "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, autocomplete: this.autocomplete, class: this.textareaClassNames(), disabled: this.disabled, id: this.componentId, maxlength: this.maxLength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, rows: this.rows, onBlur: this.onBlur, onChange: this.onTextareaChange, onFocus: this.onFocus, onInput: this.onInput }, this.inheritedAttributes), value), this.renderCharacterCounter()), this.helperMessage &&
-            h("p", { key: 'c7b68b10f0362025d90a902cbc6d2d741e579935', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
-            h("p", { key: '8fd179c3c8cf9c9d5ee7252d30357072a2f55090', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: '3e3de603c035ae3d71be28132d55992eadda9a54', icon: danger, size: "small" }), this.errorMessage))));
+        return (h(Host, { key: '8a26dea3e236078cdcc24b9d862e7ecabd5ca456', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null }, h("div", { key: 'ea3a606459ac06b710e11adbf414310fc4af27b8', class: "pds-textarea" }, this.label &&
+            h("div", { key: '970ef900e888e94e752686b543f87c49da43c3b9', class: "pds-textarea__label-wrapper" }, h("label", { key: 'fd17142249728dea905b5cfbf365b35bad35ad5f', htmlFor: this.componentId }, h("span", { key: '17d15c0f9c0c45931b94ee5385f02bcab932ac49', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), !this.hideLabel && this.renderAction()), h("div", { key: 'eb4c78830a99fa7725e8423a923b66aa155e2082', class: "pds-textarea__field-wrapper" }, h("textarea", Object.assign({ key: 'eb1b3354e8b74a998f4b7f9592eefb3bec0fce8f', ref: (el) => this.nativeTextarea = el, "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, autocomplete: this.autocomplete, class: this.textareaClassNames(), disabled: this.disabled, id: this.componentId, maxlength: this.maxLength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, rows: this.rows, onBlur: this.onBlur, onChange: this.onTextareaChange, onFocus: this.onFocus, onInput: this.onInput }, this.inheritedAttributes), value), this.renderCharacterCounter()), this.helperMessage &&
+            h("p", { key: '44dfd62abeff5e7fa43bf09aa21a130e806d48d7', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
+            h("p", { key: '8b12ec36446e8dc4af1091f5fb7e677059a32dea', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: '4728a615f8d46475a4345b78713232073547ad0c', icon: danger, size: "small" }), this.errorMessage))));
     }
     static get is() { return "pds-textarea"; }
     static get encapsulation() { return "shadow"; }

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

@@ -77,13 +77,13 @@ export class PdsToast {
         return this.icon && h("pds-icon", { name: this.icon, class: "pds-toast__icon" });
     }
     render() {
-        return (h(Host, { key: 'cf3944ff76627caaa30bc38fdfa44357488a6194', hidden: !this.isVisible }, h("div", { key: '39ce25ec4ffcaf23f565ece7e54fd4ef8a08abb5', class: {
+        return (h(Host, { key: 'cf03483967a2414e2c6ee68587af609af0bb64c6', hidden: !this.isVisible }, h("div", { key: '70413e3220f6890dd2367bc96a7060269a33124c', class: {
                 'pds-toast': true,
                 [`pds-toast--${this.type}`]: this.type !== 'default',
                 'pds-toast--animating-out': this.isAnimatingOut
-            }, role: "alert", "aria-live": "polite" }, this.renderIcon(), h("span", { key: 'cc637017d922c88a2f025e01a55294c7abbbd0da', class: "pds-toast__message" }, h("slot", { key: 'e0dbea12cefc01a377fc4f9f8ec6898d2f10ea99' })), this.dismissible && (h("button", { key: 'e3293bd0d9678052320f0261ed95084400789804', type: "button", class: "pds-toast__button", onClick: () => {
+            }, role: "alert", "aria-live": "polite" }, this.renderIcon(), h("span", { key: '52a991d93d9530e4689586f51b2b78978ff9f4d5', class: "pds-toast__message" }, h("slot", { key: 'fb00a8204606a4621315656e91b3928ed8ad4827' })), this.dismissible && (h("button", { key: 'de78866e9b4f746d823bf68b7d8736ab4bafb9d7', type: "button", class: "pds-toast__button", onClick: () => {
                 this.dismiss();
-            }, "aria-label": "Dismiss message" }, h("pds-icon", { key: '8a41d2c7fc123d5cd854212fca42eae344834d92', name: "remove" }))))));
+            }, "aria-label": "Dismiss message" }, h("pds-icon", { key: '495a71b67c4a6690f4c1b9562ddd8862d88a85e4', name: "remove" }))))));
     }
     static get is() { return "pds-toast"; }
     static get encapsulation() { return "shadow"; }

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

@@ -312,9 +312,9 @@ export class PdsTooltip {
     }
     render() {
         const hostId = this.componentId || undefined;
-        return (h(Host, { key: '6741acebcb973fd24d59a95d75aefd51fe653426', id: hostId, class: { 'pds-tooltip--is-open': this.opened } }, h("span", { key: 'f1a51aa6a9333e899d4eb8168b9ff171a463651f', class: "pds-tooltip__trigger", onMouseEnter: this.handleShow, onMouseLeave: this.handleHide,
+        return (h(Host, { key: 'a07130a894d2e76cbbeab98b62f7d44883b2ffbf', id: hostId, class: { 'pds-tooltip--is-open': this.opened } }, h("span", { key: '3b78462857e4b196caca8d1fa12fc2a4ac286af5', class: "pds-tooltip__trigger", onMouseEnter: this.handleShow, onMouseLeave: this.handleHide,
             /* focusin/out bubble; ensure keyboard users see tooltips */
-            onFocusin: this.handleShow, onFocusout: this.handleHide, ref: el => this.triggerEl = el }, h("slot", { key: 'e48e5fb75d6156d13e3872b8ee12699139cef576' })), h("div", { key: 'ed38389bf634be3014b26c9381a389482cee2f80', class: "pds-tooltip__content-slot-wrapper", hidden: true }, h("slot", { key: '2e3d2a800aba9959c5b7fc3ed4397f7789b6f383', name: "content" }))));
+            onFocusin: this.handleShow, onFocusout: this.handleHide, ref: el => this.triggerEl = el }, h("slot", { key: 'a480486c0a4e39d1afe236e344b4711b4914a89f' })), h("div", { key: '1ccfb6f48fbaccc6ba99b4d3e263c6f68c00d3f0', class: "pds-tooltip__content-slot-wrapper", hidden: true }, h("slot", { key: '67a4d2346c8d1574e17e9ccd035d83e1b232580d', name: "content" }))));
     }
     static get is() { return "pds-tooltip"; }
     static get originalStyleUrls() {

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-09-19T17:45:24",
+  "timestamp": "2025-10-02T18:12:08",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.28.2",
@@ -7507,10 +7507,10 @@
         },
         {
           "name": "variant",
-          "type": "\"accent\" | \"destructive\" | \"disclosure\" | \"primary\" | \"secondary\" | \"unstyled\"",
+          "type": "\"accent\" | \"destructive\" | \"disclosure\" | \"filter\" | \"primary\" | \"secondary\" | \"unstyled\"",
           "complexType": {
-            "original": "'primary' | 'secondary' | 'accent' | 'disclosure' | 'destructive' | 'unstyled'",
-            "resolved": "\"accent\" | \"destructive\" | \"disclosure\" | \"primary\" | \"secondary\" | \"unstyled\"",
+            "original": "'primary' | 'secondary' | 'accent' | 'disclosure' | 'destructive' | 'unstyled' | 'filter'",
+            "resolved": "\"accent\" | \"destructive\" | \"disclosure\" | \"filter\" | \"primary\" | \"secondary\" | \"unstyled\"",
             "references": {}
           },
           "mutable": false,
@@ -7537,6 +7537,10 @@
               "value": "disclosure",
               "type": "string"
             },
+            {
+              "value": "filter",
+              "type": "string"
+            },
             {
               "value": "primary",
               "type": "string"
@@ -9471,6 +9475,390 @@
       "dependencies": [],
       "dependencyGraph": {}
     },
+    {
+      "filePath": "src/components/pds-filters/pds-filter/pds-filter.tsx",
+      "encapsulation": "shadow",
+      "tag": "pds-filter",
+      "readme": "# pds-filter\n\n\n",
+      "docs": "Individual filter component with cross-browser popover positioning.\n\nUses a hybrid approach for optimal cross-browser compatibility:\n- Modern browsers: CSS anchor positioning + JavaScript flip classes\n- Fallback browsers: JavaScript positioning with viewport boundary detection",
+      "docsTags": [
+        {
+          "name": "part",
+          "text": "button - Exposes the trigger button element for styling."
+        },
+        {
+          "name": "part",
+          "text": "button-content - Exposes the button content container for styling."
+        },
+        {
+          "name": "part",
+          "text": "button-text - Exposes the button text for styling."
+        },
+        {
+          "name": "part",
+          "text": "icon - Exposes the icon component for styling."
+        },
+        {
+          "name": "part",
+          "text": "popover - Exposes the popover container for styling."
+        },
+        {
+          "name": "slot",
+          "text": "(default) - Popover content that will be displayed when the filter is open."
+        }
+      ],
+      "usage": {},
+      "props": [
+        {
+          "name": "componentId",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "component-id",
+          "reflectToAttr": false,
+          "docs": "A unique identifier used for the underlying component `id` attribute.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": true,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "icon",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "icon",
+          "reflectToAttr": false,
+          "docs": "The name of the icon to display in the trigger button.\nFor 'clear' variant, this is ignored as it always shows trash icon.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "text",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "text",
+          "reflectToAttr": false,
+          "docs": "The text content displayed in the trigger button.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "variant",
+          "type": "\"clear\" | \"default\" | \"more\" | \"selected\"",
+          "complexType": {
+            "original": "PdsFilterVariant",
+            "resolved": "\"clear\" | \"default\" | \"more\" | \"selected\"",
+            "references": {
+              "PdsFilterVariant": {
+                "location": "import",
+                "path": "./filter-interface",
+                "id": "src/components/pds-filters/pds-filter/filter-interface.ts::PdsFilterVariant"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "variant",
+          "reflectToAttr": false,
+          "docs": "The variant style of the filter trigger.",
+          "docsTags": [
+            {
+              "name": "defaultValue",
+              "text": "'default'"
+            }
+          ],
+          "default": "'default'",
+          "values": [
+            {
+              "value": "clear",
+              "type": "string"
+            },
+            {
+              "value": "default",
+              "type": "string"
+            },
+            {
+              "value": "more",
+              "type": "string"
+            },
+            {
+              "value": "selected",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        }
+      ],
+      "methods": [
+        {
+          "name": "hideFilter",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "() => Promise<void>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<void>"
+          },
+          "signature": "hideFilter() => Promise<void>",
+          "parameters": [],
+          "docs": "Closes the filter popover programmatically.\nNote: Clear variant does not support popover functionality.",
+          "docsTags": []
+        },
+        {
+          "name": "showFilter",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "() => Promise<void>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<void>"
+          },
+          "signature": "showFilter() => Promise<void>",
+          "parameters": [],
+          "docs": "Opens the filter popover programmatically.\nNote: Clear variant does not support popover functionality.",
+          "docsTags": []
+        }
+      ],
+      "events": [
+        {
+          "event": "pdsFilterClear",
+          "detail": "PdsFilterClearEventDetail",
+          "bubbles": true,
+          "complexType": {
+            "original": "PdsFilterClearEventDetail",
+            "resolved": "PdsFilterClearEventDetail",
+            "references": {
+              "PdsFilterClearEventDetail": {
+                "location": "import",
+                "path": "./filter-interface",
+                "id": "src/components/pds-filters/pds-filter/filter-interface.ts::PdsFilterClearEventDetail"
+              }
+            }
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Event emitted when the clear variant is clicked.",
+          "docsTags": []
+        },
+        {
+          "event": "pdsFilterClose",
+          "detail": "PdsFilterCloseEventDetail",
+          "bubbles": true,
+          "complexType": {
+            "original": "PdsFilterCloseEventDetail",
+            "resolved": "PdsFilterCloseEventDetail",
+            "references": {
+              "PdsFilterCloseEventDetail": {
+                "location": "import",
+                "path": "./filter-interface",
+                "id": "src/components/pds-filters/pds-filter/filter-interface.ts::PdsFilterCloseEventDetail"
+              }
+            }
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Event emitted when the filter popover is closed.",
+          "docsTags": []
+        },
+        {
+          "event": "pdsFilterOpen",
+          "detail": "PdsFilterOpenEventDetail",
+          "bubbles": true,
+          "complexType": {
+            "original": "PdsFilterOpenEventDetail",
+            "resolved": "PdsFilterOpenEventDetail",
+            "references": {
+              "PdsFilterOpenEventDetail": {
+                "location": "import",
+                "path": "./filter-interface",
+                "id": "src/components/pds-filters/pds-filter/filter-interface.ts::PdsFilterOpenEventDetail"
+              }
+            }
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Event emitted when the filter popover is opened.",
+          "docsTags": []
+        }
+      ],
+      "listeners": [
+        {
+          "event": "resize",
+          "target": "window",
+          "capture": false,
+          "passive": true
+        },
+        {
+          "event": "scroll",
+          "target": "window",
+          "capture": false,
+          "passive": true
+        },
+        {
+          "event": "toggle",
+          "target": "document",
+          "capture": false,
+          "passive": false
+        },
+        {
+          "event": "click",
+          "target": "document",
+          "capture": false,
+          "passive": false
+        },
+        {
+          "event": "keydown",
+          "target": "document",
+          "capture": false,
+          "passive": false
+        }
+      ],
+      "styles": [],
+      "slots": [
+        {
+          "name": "(default)",
+          "docs": "Popover content that will be displayed when the filter is open."
+        }
+      ],
+      "parts": [
+        {
+          "name": "button",
+          "docs": "Exposes the trigger button element for styling."
+        },
+        {
+          "name": "button-content",
+          "docs": "Exposes the button content container for styling."
+        },
+        {
+          "name": "button-text",
+          "docs": "Exposes the button text for styling."
+        },
+        {
+          "name": "icon",
+          "docs": "Exposes the icon component for styling."
+        },
+        {
+          "name": "popover",
+          "docs": "Exposes the popover container for styling."
+        }
+      ],
+      "dependents": [],
+      "dependencies": [
+        "pds-icon"
+      ],
+      "dependencyGraph": {
+        "pds-filter": [
+          "pds-icon"
+        ]
+      }
+    },
+    {
+      "filePath": "src/components/pds-filters/pds-filters.tsx",
+      "encapsulation": "shadow",
+      "tag": "pds-filters",
+      "readme": "# pds-filters\n\n\n",
+      "docs": "",
+      "docsTags": [
+        {
+          "name": "slot",
+          "text": "(default) - Container for pds-filter components."
+        }
+      ],
+      "usage": {},
+      "props": [
+        {
+          "name": "componentId",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "component-id",
+          "reflectToAttr": false,
+          "docs": "A unique identifier used for the underlying component `id` attribute.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        }
+      ],
+      "methods": [],
+      "events": [],
+      "listeners": [],
+      "styles": [],
+      "slots": [
+        {
+          "name": "(default)",
+          "docs": "Container for pds-filter components."
+        }
+      ],
+      "parts": [],
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {}
+    },
     {
       "filePath": "src/components/pds-image/pds-image.tsx",
       "encapsulation": "shadow",
@@ -14006,6 +14394,10 @@
         {
           "name": "slot",
           "text": "tabpanels - Content is placed directly after the `div[role=\"tablist\"]` element as siblings"
+        },
+        {
+          "name": "part",
+          "text": "tab-list - Exposes the container element that holds all the tab buttons for styling."
         }
       ],
       "usage": {},
@@ -14153,7 +14545,12 @@
           "docs": "Content is placed within the `div[role=\"tablist\"]` element as children"
         }
       ],
-      "parts": [],
+      "parts": [
+        {
+          "name": "tab-list",
+          "docs": "Exposes the container element that holds all the tab buttons for styling."
+        }
+      ],
       "dependents": [],
       "dependencies": [],
       "dependencyGraph": {}
@@ -15651,6 +16048,26 @@
       "docstring": "",
       "path": "src/utils/types.ts"
     },
+    "src/components/pds-filters/pds-filter/filter-interface.ts::PdsFilterVariant": {
+      "declaration": "export type PdsFilterVariant = 'default' | 'selected' | 'more' | 'clear';",
+      "docstring": "",
+      "path": "src/components/pds-filters/pds-filter/filter-interface.ts"
+    },
+    "src/components/pds-filters/pds-filter/filter-interface.ts::PdsFilterOpenEventDetail": {
+      "declaration": "export interface PdsFilterOpenEventDetail {\n  componentId: string;\n  variant: PdsFilterVariant;\n  text?: string;\n}",
+      "docstring": "",
+      "path": "src/components/pds-filters/pds-filter/filter-interface.ts"
+    },
+    "src/components/pds-filters/pds-filter/filter-interface.ts::PdsFilterCloseEventDetail": {
+      "declaration": "export interface PdsFilterCloseEventDetail {\n  componentId: string;\n  variant: PdsFilterVariant;\n  text?: string;\n}",
+      "docstring": "",
+      "path": "src/components/pds-filters/pds-filter/filter-interface.ts"
+    },
+    "src/components/pds-filters/pds-filter/filter-interface.ts::PdsFilterClearEventDetail": {
+      "declaration": "export interface PdsFilterClearEventDetail {\n  componentId: string;\n  text?: string;\n}",
+      "docstring": "",
+      "path": "src/components/pds-filters/pds-filter/filter-interface.ts"
+    },
     "src/components/pds-input/input-interface.ts::InputChangeEventDetail": {
       "declaration": "export interface InputChangeEventDetail {\n  value?: string | number | null;\n  event?: Event;\n}",
       "docstring": "",