npm - @pine-ds/core - Versions diffs - 3.14.0 → 3.14.2-dev.0 - Mend

@pine-ds/core 3.14.0 → 3.14.2-dev.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (526) hide show

package/dist/collection/components/pds-select/pds-select.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pds-select.js","sourceRoot":"","sources":["../../../../src/components/pds-select/pds-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, h, Prop, Watch } from '@stencil/core';\nimport { messageId, exposeTypeProperty } from '../../utils/form';\nimport { danger, enlarge } from '@pine-ds/icons/icons';\n\n/*\n @slot action - Content to be displayed in the label area, typically for help icons or links\n /\n@Component({\n tag: 'pds-select',\n styleUrls: ['pds-select.tokens.scss', '../../global/styles/utils/label.scss', 'pds-select.scss'],\n shadow: true,\n formAssociated: true,\n})\nexport class PdsSelect {\n\n private selectEl!: HTMLSelectElement;\n private slotContainer!: HTMLDivElement;\n private internals?: ElementInternals;\n private _type: 'select-one' \| 'select-multiple' = 'select-one';\n\n @Element() el: HTMLPdsSelectElement;\n\n /\n Specifies if and how the browser provides `autocomplete` assistance for the field.\n /\n @Prop() autocomplete: string;\n\n /\n A unique identifier used for the underlying component `id` attribute.\n /\n @Prop() componentId!: string;\n\n /\n Indicates whether or not the select field is disabled.\n * @defaultValue false\n /\n @Prop() disabled = false\n\n /\n Displays error message text describing an invalid state.\n /\n @Prop() errorMessage: string;\n\n /\n Visually hides the label text for instances where only the select should be displayed. Label remains accessible to assistive technology such as screen readers.\n * Note: When true, the action slot is also hidden to maintain a minimal UI.\n /\n @Prop() hideLabel: boolean;\n\n /\n Displays helper message text below select.\n /\n @Prop() helperMessage: string;\n\n /\n Determines whether or not the select is invalid.\n /\n @Prop() invalid?: boolean;\n\n /\n Text to be displayed as the select label.\n /\n @Prop() label?: string;\n\n /\n Indicates whether multiple options can be selected.\n * @defaultValue false\n /\n @Prop() multiple = false;\n\n /\n Specifies the name. Submitted with the form name/value pair.\n /\n @Prop() name!: string;\n\n /\n Indicates whether or not the select field is required.\n * @defaultValue false\n /\n @Prop() required = false;\n\n /\n Applies highlight styling to the select field.\n /\n @Prop({ reflect: true }) highlight?: boolean;\n\n /\n The value(s) of the selected option(s).\n \n /\n @Prop({ mutable: true }) value?: string \| string[];\n\n\n /*\n Emitted when the select value changes.\n /\n @Event() pdsSelectChange: EventEmitter<InputEvent>;\n\n /\n Emitted when the select loses focus.\n /\n @Event() pdsBlur!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the select gains focus.\n /\n @Event() pdsFocus!: EventEmitter<FocusEvent>;\n\n /\n Emitted when a key is pressed down in the select.\n /\n @Event() pdsKeyDown!: EventEmitter<KeyboardEvent>;\n\n @Watch('value')\n /\n Handles the change in the value of the select component.\n * This method is called whenever the value of the select component changes.\n * It updates the selected option accordingly.\n /\n valueChanged() {\n this.updateSelectedOption();\n this.updateFormValue();\n }\n\n @Watch('multiple')\n /\n Updates the type property when multiple changes to match native select behavior.\n /\n multipleChanged() {\n this.updateType();\n }\n\n private updateType() {\n this._type = this.multiple ? 'select-multiple' : 'select-one';\n }\n\n connectedCallback() {\n // Initialize ElementInternals for form association\n if (this.el.attachInternals) {\n this.internals = this.el.attachInternals();\n }\n\n // Expose type property on the element instance to match native form element behavior\n exposeTypeProperty(this.el, () => this._type);\n }\n\n componentWillLoad() {\n // Set initial type based on multiple prop\n this.updateType();\n this.updateSelectedOption();\n }\n\n componentDidLoad() {\n // Set initial form value\n this.updateFormValue();\n }\n\n /\n Updates the selected option in the select element based on the current value.\n \n This method iterates through all the options of the select element and sets the\n * 'selected' attribute on the option that matches the current value. If an option\n * does not match the current value, the 'selected' attribute is removed.\n \n @private\n * @returns {void}\n /\n private updateSelectedOption() {\n if (this.selectEl) {\n const options = this.selectEl.options;\n\n // Update the selected attribute for all options.\n Array.from(options).map((option: HTMLOptionElement) => {\n if (Array.isArray(this.value)) {\n option.selected = this.value.includes(option.value);\n } else {\n option.selected = this.value === option.value;\n }\n });\n };\n }\n\n /\n Emits an event on input change.\n /\n private onSelectUpdate = (e: Event) => {\n const target = e.target as HTMLSelectElement\n\n const values = Array.from(target.options)\n .filter((option) => ( option.selected))\n .map((option) => ( option.value));\n\n if (values.length === 1 && !this.multiple) {\n this.value = values[0];\n } else {\n this.value = values;\n }\n\n this.pdsSelectChange.emit(e as InputEvent);\n };\n\n private onBlur = (ev: FocusEvent) => {\n this.pdsBlur.emit(ev);\n };\n\n private onFocus = (ev: FocusEvent) => {\n this.pdsFocus.emit(ev);\n };\n\n private onKeyDown = (ev: KeyboardEvent) => {\n this.pdsKeyDown.emit(ev);\n };\n\n /\n Handles the change event for the slot element.\n * This method is triggered when the slot content changes.\n * It updates the inner HTML of the select element by cloning and appending\n * the assigned <option> elements from the slot.\n /\n private handleSlotChange = () => {\n const slot = this.slotContainer.querySelector('slot') as HTMLSlotElement;\n\n this.selectEl.innerHTML = '';\n const assignedElements = slot.assignedElements({ flatten: true }) as (HTMLOptionElement \| HTMLOptGroupElement)[];\n\n assignedElements.forEach((item) => {\n if ( ['OPTION', 'OPTGROUP'].includes(item.tagName)) {\n const clonedItem = item.cloneNode(true) as HTMLOptionElement \| HTMLOptGroupElement;\n if (clonedItem.tagName === 'OPTION' && (clonedItem as HTMLOptionElement).value === this.value) {\n (clonedItem as HTMLOptionElement).selected = true;\n }\n this.selectEl.appendChild(clonedItem);\n }\n });\n\n this.updateSelectedOption();\n };\n\n private getHelperMessage() {\n return this.helperMessage && (\n <p class=\"pds-select__helper-message\" id={messageId(this.componentId, 'helper')}>\n {this.helperMessage}\n </p>\n );\n }\n\n private getErrorMessage() {\n return this.errorMessage && (\n <p class=\"pds-select__error-message\" id={messageId(this.componentId, 'error')} aria-live=\"assertive\">\n <pds-icon icon={danger} size=\"small\"></pds-icon>\n {this.errorMessage}\n </p>\n );\n }\n\n private renderMessages() {\n if (!this.helperMessage && !this.errorMessage) return null;\n\n return (\n <div class=\"pds-select__message\">\n {this.getHelperMessage()}\n {this.getErrorMessage()}\n </div>\n );\n }\n\n private classNames() {\n const classNames = [];\n\n if (this.invalid) { classNames.push('is-invalid'); }\n if (this.disabled) { classNames.push('is-disabled'); }\n\n return classNames.join(' ');\n }\n\n private renderAction() {\n const hasAction = this.el.querySelector('[slot=\"action\"]') !== null;\n if (hasAction) {\n return (\n <div class=\"pds-select__action\" part=\"action\">\n <slot name=\"action\"></slot>\n </div>\n );\n }\n return null;\n }\n\n /\n Updates the form value using ElementInternals API\n /\n private updateFormValue() {\n if (this.internals && this.internals.setFormValue) {\n const value = this.value;\n\n // Handle multi-select arrays by converting to FormData or comma-separated string\n if (Array.isArray(value)) {\n if (value.length > 1) {\n // For multiple values, create FormData with multiple entries\n const formData = new FormData();\n value.forEach(val => formData.append(this.name \|\| '', val));\n this.internals.setFormValue(formData);\n } else {\n // Single value in array, use the string value\n this.internals.setFormValue(value[0] \|\| null);\n }\n } else {\n // Single string value\n this.internals.setFormValue(value \|\| null);\n }\n\n // Set validity based on native select validation\n if (this.selectEl && this.internals && this.internals.setValidity) {\n this.internals.setValidity(\n this.selectEl.validity,\n this.selectEl.validationMessage,\n this.selectEl\n );\n }\n }\n }\n\n /\n Form Associated Custom Elements API: Called when the form is reset\n /\n formResetCallback() {\n this.value = '';\n this.updateFormValue();\n }\n\n /\n Form Associated Custom Elements API: Called when the form is disabled\n /\n formDisabledCallback(disabled: boolean) {\n this.disabled = disabled;\n }\n\n /\n Form Associated Custom Elements API: Called to restore form state\n */\n formStateRestoreCallback(state: string \| FormData \| null) {\n if (typeof state === 'string') {\n this.value = state;\n } else if (state instanceof FormData && this.name) {\n // Extract value(s) from FormData using the select's name\n const values = state.getAll(this.name);\n if (values.length > 1) {\n // Multi-select: convert to string array\n this.value = values.filter(v => typeof v === 'string') as string[];\n } else if (values.length === 1 && typeof values[0] === 'string') {\n // Single select: use string value\n this.value = values[0];\n }\n }\n }\n\n render() {\n const hasAction = this.el.querySelector('[slot=\"action\"]') !== null;\n\n return (\n <Host aria-disabled={this.disabled ? 'true' : null} class={this.classNames()} has-action={hasAction && !this.hideLabel ? 'true' : null}>\n <div class=\"pds-select\">\n {!this.hideLabel && (\n <div class=\"pds-select__label-wrapper\">\n <label htmlFor={this.componentId}>\n <span class={this.hideLabel ? 'visually-hidden' : ''}>\n {this.label}\n </span>\n </label>\n {hasAction && this.renderAction()}\n </div>\n )}\n <select\n aria-label={this.hideLabel ? this.label : undefined}\n autocomplete={this.autocomplete \|\| undefined}\n class=\"pds-select__field\"\n disabled={this.disabled}\n id={this.componentId}\n multiple={this.multiple}\n name={this.name}\n onBlur={this.onBlur}\n onChange={this.onSelectUpdate}\n onFocus={this.onFocus}\n onKeyDown={this.onKeyDown}\n part=\"select\"\n required={this.required}\n ref={(el) => (this.selectEl = el as HTMLSelectElement)}\n ></select>\n <div aria-hidden=\"true\" class=\"hidden\" ref={(el) => (this.slotContainer = el)}>\n <slot onSlotchange={this.handleSlotChange}></slot>\n </div>\n {this.renderMessages()}\n {!this.multiple && <pds-icon class=\"pds-select__select-icon\" icon={enlarge} />}\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"pds-select.js","sourceRoot":"","sources":["../../../../src/components/pds-select/pds-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, h, Prop, Watch } from '@stencil/core';\nimport { messageId, exposeTypeProperty } from '../../utils/form';\nimport { danger, enlarge } from '@pine-ds/icons/icons';\n\n/*\n @slot action - Content to be displayed in the label area, typically for help icons or links\n /\n@Component({\n tag: 'pds-select',\n styleUrls: ['pds-select.tokens.scss', '../../global/styles/utils/label.scss', 'pds-select.scss'],\n shadow: true,\n formAssociated: true,\n})\nexport class PdsSelect {\n\n private selectEl!: HTMLSelectElement;\n private slotContainer!: HTMLDivElement;\n private internals?: ElementInternals;\n private _type: 'select-one' \| 'select-multiple' = 'select-one';\n\n @Element() el: HTMLPdsSelectElement;\n\n /\n Specifies if and how the browser provides `autocomplete` assistance for the field.\n /\n @Prop() autocomplete: string;\n\n /\n A unique identifier used for the underlying component `id` attribute.\n /\n @Prop() componentId!: string;\n\n /\n Indicates whether or not the select field is disabled.\n * @defaultValue false\n /\n @Prop() disabled = false\n\n /\n Displays error message text describing an invalid state.\n /\n @Prop() errorMessage: string;\n\n /\n Visually hides the label text for instances where only the select should be displayed. Label remains accessible to assistive technology such as screen readers.\n * Note: When true, the action slot is also hidden to maintain a minimal UI.\n /\n @Prop() hideLabel: boolean;\n\n /\n Displays helper message text below select.\n /\n @Prop() helperMessage: string;\n\n /\n Determines whether or not the select is invalid.\n /\n @Prop() invalid?: boolean;\n\n /\n Text to be displayed as the select label.\n /\n @Prop() label?: string;\n\n /\n Indicates whether multiple options can be selected.\n * @defaultValue false\n /\n @Prop() multiple = false;\n\n /\n Specifies the name. Submitted with the form name/value pair.\n /\n @Prop() name!: string;\n\n /\n Indicates whether or not the select field is required.\n * @defaultValue false\n /\n @Prop() required = false;\n\n /\n Applies highlight styling to the select field.\n /\n @Prop({ reflect: true }) highlight?: boolean;\n\n /\n The value(s) of the selected option(s).\n \n /\n @Prop({ mutable: true }) value?: string \| string[];\n\n\n /*\n Emitted when the select value changes.\n /\n @Event() pdsSelectChange: EventEmitter<InputEvent>;\n\n /\n Emitted when the select loses focus.\n /\n @Event() pdsBlur!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the select gains focus.\n /\n @Event() pdsFocus!: EventEmitter<FocusEvent>;\n\n /\n Emitted when a key is pressed down in the select.\n /\n @Event() pdsKeyDown!: EventEmitter<KeyboardEvent>;\n\n @Watch('value')\n /\n Handles the change in the value of the select component.\n * This method is called whenever the value of the select component changes.\n * It updates the selected option accordingly.\n /\n valueChanged() {\n this.updateSelectedOption();\n this.updateFormValue();\n }\n\n @Watch('multiple')\n /\n Updates the type property when multiple changes to match native select behavior.\n /\n multipleChanged() {\n this.updateType();\n }\n\n private updateType() {\n this._type = this.multiple ? 'select-multiple' : 'select-one';\n }\n\n connectedCallback() {\n // Initialize ElementInternals for form association (only once per element instance)\n if (this.el.attachInternals && !this.internals) {\n this.internals = this.el.attachInternals();\n }\n\n // Expose type property on the element instance to match native form element behavior\n exposeTypeProperty(this.el, () => this._type);\n }\n\n componentWillLoad() {\n // Set initial type based on multiple prop\n this.updateType();\n this.updateSelectedOption();\n }\n\n componentDidLoad() {\n // Set initial form value\n this.updateFormValue();\n }\n\n /\n Updates the selected option in the select element based on the current value.\n \n This method iterates through all the options of the select element and sets the\n * 'selected' attribute on the option that matches the current value. If an option\n * does not match the current value, the 'selected' attribute is removed.\n \n @private\n * @returns {void}\n /\n private updateSelectedOption() {\n if (this.selectEl) {\n const options = this.selectEl.options;\n\n // Update the selected attribute for all options.\n Array.from(options).map((option: HTMLOptionElement) => {\n if (Array.isArray(this.value)) {\n option.selected = this.value.includes(option.value);\n } else {\n option.selected = this.value === option.value;\n }\n });\n };\n }\n\n /\n Emits an event on input change.\n /\n private onSelectUpdate = (e: Event) => {\n const target = e.target as HTMLSelectElement\n\n const values = Array.from(target.options)\n .filter((option) => ( option.selected))\n .map((option) => ( option.value));\n\n if (values.length === 1 && !this.multiple) {\n this.value = values[0];\n } else {\n this.value = values;\n }\n\n this.pdsSelectChange.emit(e as InputEvent);\n };\n\n private onBlur = (ev: FocusEvent) => {\n this.pdsBlur.emit(ev);\n };\n\n private onFocus = (ev: FocusEvent) => {\n this.pdsFocus.emit(ev);\n };\n\n private onKeyDown = (ev: KeyboardEvent) => {\n this.pdsKeyDown.emit(ev);\n };\n\n /\n Handles the change event for the slot element.\n * This method is triggered when the slot content changes.\n * It updates the inner HTML of the select element by cloning and appending\n * the assigned <option> elements from the slot.\n /\n private handleSlotChange = () => {\n const slot = this.slotContainer.querySelector('slot') as HTMLSlotElement;\n\n this.selectEl.innerHTML = '';\n const assignedElements = slot.assignedElements({ flatten: true }) as (HTMLOptionElement \| HTMLOptGroupElement)[];\n\n assignedElements.forEach((item) => {\n if ( ['OPTION', 'OPTGROUP'].includes(item.tagName)) {\n const clonedItem = item.cloneNode(true) as HTMLOptionElement \| HTMLOptGroupElement;\n if (clonedItem.tagName === 'OPTION' && (clonedItem as HTMLOptionElement).value === this.value) {\n (clonedItem as HTMLOptionElement).selected = true;\n }\n this.selectEl.appendChild(clonedItem);\n }\n });\n\n this.updateSelectedOption();\n };\n\n private getHelperMessage() {\n return this.helperMessage && (\n <p class=\"pds-select__helper-message\" id={messageId(this.componentId, 'helper')}>\n {this.helperMessage}\n </p>\n );\n }\n\n private getErrorMessage() {\n return this.errorMessage && (\n <p class=\"pds-select__error-message\" id={messageId(this.componentId, 'error')} aria-live=\"assertive\">\n <pds-icon icon={danger} size=\"small\"></pds-icon>\n {this.errorMessage}\n </p>\n );\n }\n\n private renderMessages() {\n if (!this.helperMessage && !this.errorMessage) return null;\n\n return (\n <div class=\"pds-select__message\">\n {this.getHelperMessage()}\n {this.getErrorMessage()}\n </div>\n );\n }\n\n private classNames() {\n const classNames = [];\n\n if (this.invalid) { classNames.push('is-invalid'); }\n if (this.disabled) { classNames.push('is-disabled'); }\n\n return classNames.join(' ');\n }\n\n private renderAction() {\n const hasAction = this.el.querySelector('[slot=\"action\"]') !== null;\n if (hasAction) {\n return (\n <div class=\"pds-select__action\" part=\"action\">\n <slot name=\"action\"></slot>\n </div>\n );\n }\n return null;\n }\n\n /\n Updates the form value using ElementInternals API\n /\n private updateFormValue() {\n if (this.internals && this.internals.setFormValue) {\n const value = this.value;\n\n // Handle multi-select arrays by converting to FormData or comma-separated string\n if (Array.isArray(value)) {\n if (value.length > 1) {\n // For multiple values, create FormData with multiple entries\n const formData = new FormData();\n value.forEach(val => formData.append(this.name \|\| '', val));\n this.internals.setFormValue(formData);\n } else {\n // Single value in array, use the string value\n this.internals.setFormValue(value[0] \|\| null);\n }\n } else {\n // Single string value\n this.internals.setFormValue(value \|\| null);\n }\n\n // Set validity based on native select validation\n if (this.selectEl && this.internals && this.internals.setValidity) {\n this.internals.setValidity(\n this.selectEl.validity,\n this.selectEl.validationMessage,\n this.selectEl\n );\n }\n }\n }\n\n /\n Form Associated Custom Elements API: Called when the form is reset\n /\n formResetCallback() {\n this.value = '';\n this.updateFormValue();\n }\n\n /\n Form Associated Custom Elements API: Called when the form is disabled\n /\n formDisabledCallback(disabled: boolean) {\n this.disabled = disabled;\n }\n\n /\n Form Associated Custom Elements API: Called to restore form state\n */\n formStateRestoreCallback(state: string \| FormData \| null) {\n if (typeof state === 'string') {\n this.value = state;\n } else if (state instanceof FormData && this.name) {\n // Extract value(s) from FormData using the select's name\n const values = state.getAll(this.name);\n if (values.length > 1) {\n // Multi-select: convert to string array\n this.value = values.filter(v => typeof v === 'string') as string[];\n } else if (values.length === 1 && typeof values[0] === 'string') {\n // Single select: use string value\n this.value = values[0];\n }\n }\n }\n\n render() {\n const hasAction = this.el.querySelector('[slot=\"action\"]') !== null;\n\n return (\n <Host aria-disabled={this.disabled ? 'true' : null} class={this.classNames()} has-action={hasAction && !this.hideLabel ? 'true' : null}>\n <div class=\"pds-select\">\n {!this.hideLabel && (\n <div class=\"pds-select__label-wrapper\">\n <label htmlFor={this.componentId}>\n <span class={this.hideLabel ? 'visually-hidden' : ''}>\n {this.label}\n </span>\n </label>\n {hasAction && this.renderAction()}\n </div>\n )}\n <select\n aria-label={this.hideLabel ? this.label : undefined}\n autocomplete={this.autocomplete \|\| undefined}\n class=\"pds-select__field\"\n disabled={this.disabled}\n id={this.componentId}\n multiple={this.multiple}\n name={this.name}\n onBlur={this.onBlur}\n onChange={this.onSelectUpdate}\n onFocus={this.onFocus}\n onKeyDown={this.onKeyDown}\n part=\"select\"\n required={this.required}\n ref={(el) => (this.selectEl = el as HTMLSelectElement)}\n ></select>\n <div aria-hidden=\"true\" class=\"hidden\" ref={(el) => (this.slotContainer = el)}>\n <slot onSlotchange={this.handleSlotChange}></slot>\n </div>\n {this.renderMessages()}\n {!this.multiple && <pds-icon class=\"pds-select__select-icon\" icon={enlarge} />}\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/pds-sortable/pds-sortable-item/pds-sortable-item.js CHANGED Viewed

@@ -25,7 +25,7 @@ export class PdsSortableItem {
         }
     }
     render() {
-        return (h(Host, { key: '3af6da44189e50cffdbcfa4c82a6dba1fe33ff0e', class: "pds-sortable-item", id: this.componentId }, this.showHandle && (h("div", { key: '19925b01cabdcb7e9f06b3e3445b95cb171ee69e', class: "pds-sortable-item__handle" }, h("pds-icon", { key: 'ac514e4506528afd794b1df3574091bc311b3469', icon: handleIcon }))), h("slot", { key: '37acfdce5241144a4e5c804f7fb407ad5f7bc7d1' }), this.enableActions && (h("div", { key: '64679ea0a82688c111efaec9a1370b1bd83480d3', class: "pds-sortable-item__actions" }, h("slot", { key: 'a2bb4a9bf2e4900f5f2c12b2d6e0bcc3a49a9042', name: "sortable-item-actions" })))));
+        return (h(Host, { key: 'c2b286104572c25626e9c1ae419c2526ac1eb9a1', class: "pds-sortable-item", id: this.componentId }, this.showHandle && (h("div", { key: '29354af0cc9ca6623794e3abf7b9419edd0a8e8f', class: "pds-sortable-item__handle" }, h("pds-icon", { key: '17a662d94426e292c3a25c4567f3714f207e2383', icon: handleIcon }))), h("slot", { key: 'a3cee3d4c8dbb213e7a1d9bbf6fdce59fa8b796d' }), this.enableActions && (h("div", { key: '8b314f938ed53ab6680b020bd38aa6dbee804aad', class: "pds-sortable-item__actions" }, h("slot", { key: '60fe3c241349d91d6325e67bf2a63fe1f7858fc8', name: "sortable-item-actions" })))));
     }
     static get is() { return "pds-sortable-item"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/pds-sortable/pds-sortable.js CHANGED Viewed

@@ -44,7 +44,7 @@ export class PdsSortable {
         Sortable.create(this.el, sortableOptions);
     }
     render() {
-        return (h(Host, { key: '4f1335560e5082991c6f3dffcf30d83f89b2c20c', class: this.classNames(), id: this.componentId }, h("slot", { key: '848505cc4b31df36c57c2db8690d1ce93df17b92' })));
+        return (h(Host, { key: 'b01f12d7d2973ce2fa513a468be3634e38241171', class: this.classNames(), id: this.componentId }, h("slot", { key: '7d9dff192e9b6a01e71c41d9250c0245ca548658' })));
     }
     static get is() { return "pds-sortable"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/pds-switch/pds-switch.js CHANGED Viewed

@@ -42,7 +42,8 @@ export class PdsSwitch {
         };
     }
     connectedCallback() {
-        if (this.el.attachInternals) {
+        // Initialize ElementInternals for form association (only once per element instance)
+        if (this.el.attachInternals && !this.internals) {
             this.internals = this.el.attachInternals();
         }
         // Expose type property on the element instance to match native form element behavior
@@ -83,9 +84,9 @@ export class PdsSwitch {
         this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
     }
     render() {
-        return (h(Host, { key: '15737c5ac3c492efc88e29f5e63496ed07ab5fe6', class: this.switchClassNames(), "aria-disabled": this.disabled ? 'true' : null }, h("label", { key: '30278cef4ab6bdc51e65f20e19883c3354c9b23a', htmlFor: this.componentId }, h("input", Object.assign({ key: '598b641ab1a6c8dadad4df275513b1e910fd0167', "aria-describedby": assignDescription(this.componentId, this.invalid, this.errorMessage || this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, checked: this.checked, class: "pds-switch__input", disabled: this.disabled, id: this.componentId, name: this.name ? this.name : this.componentId, onChange: this.onSwitchUpdate, required: this.required, type: "checkbox", value: this.value }, this.inheritedAttributes)), h("span", { key: '4d8a1c874d6cfe8bfac9ccc06ca03a6c8c25864e', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), this.helperMessage &&
-            h("div", { key: '8a1eee8b5afcac6bb9a3399424aaf6d3995050cf', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            h("div", { key: '1a6b5bbb1e90a745c928b297262dcf705d429a8e', class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '055e7011ba1ec1379396baab41e10c03111567d3', icon: danger, size: "small" }), this.errorMessage)));
+        return (h(Host, { key: 'f8025b631f550d179392c16b8a6fd2995d02db30', class: this.switchClassNames(), "aria-disabled": this.disabled ? 'true' : null }, h("label", { key: 'f732f24b29e461e06de507d73ee930a2613d4763', htmlFor: this.componentId }, h("input", Object.assign({ key: 'f8848c91248fa80dc717d0e1c331a2cf42354b26', "aria-describedby": assignDescription(this.componentId, this.invalid, this.errorMessage || this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, checked: this.checked, class: "pds-switch__input", disabled: this.disabled, id: this.componentId, name: this.name ? this.name : this.componentId, onChange: this.onSwitchUpdate, required: this.required, type: "checkbox", value: this.value }, this.inheritedAttributes)), h("span", { key: '1e9ce74d091e835d5f3adfc21b37a10257b84492', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), this.helperMessage &&
+            h("div", { key: 'c7973e1d05121a75d8a5e1398baa0d96ac96d18c', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            h("div", { key: '4487146144a4eb5f1e87923f10a7e562b17c5968', class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '0d3edf376b939ee900496aebab9e4faf62d8f7e5', icon: danger, size: "small" }), this.errorMessage)));
     }
     static get is() { return "pds-switch"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-switch/pds-switch.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pds-switch.js","sourceRoot":"","sources":["../../../../src/components/pds-switch/pds-switch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC9F,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AACpF,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAS1D,MAAM,OAAO,SAAS;IANtB;QAOU,wBAAmB,GAAe,EAAE,CAAC;QAE5B,UAAK,GAAG,UAAmB,CAAC;QAS7C;;WAEG;QACsB,YAAO,GAAG,KAAK,CAAC;QAEzC;;WAEG;QACK,aAAQ,GAAI,KAAK,CAAC;QAiB1B;;WAEG;QACK,YAAO,GAAI,KAAK,CAAC;QAYzB;;WAEG;QACK,aAAQ,GAAI,KAAK,CAAC;QAalB,mBAAc,GAAG,CAAC,CAAQ,EAAE,EAAE;YACpC,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAE1B,MAAM,KAAK,GAAG,CAAC,CAAC,MAA0B,CAAC;YAC3C,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC;YAE7B,IAAI,CAAC,eAAe,EAAE,CAAC;YAEvB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAe,CAAC,CAAC;QAC7C,CAAC,CAAC;QAEM,qBAAgB,GAAG,GAAG,EAAE;YAC9B,IAAI,aAAa,GAAG,YAAY,CAAC;YAEjC,IAAI,IAAI,CAAC,OAAO,KAAK,IAAI,EAAE,CAAC;gBAC1B,aAAa,IAAI,oBAAoB,CAAC;YACxC,CAAC;YACD,IAAI,IAAI,CAAC,aAAa,KAAK,SAAS,EAAE,CAAC;gBACrC,aAAa,IAAI,sBAAsB,CAAC;YAC1C,CAAC;YACD,OAAO,aAAa,CAAC;QACvB,CAAC,CAAC;~~KAgGH~~;~~IA9FC~~,iBAAiB;QACf,IAAI,IAAI,CAAC,EAAE,CAAC,eAAe,EAAE,CAAC;~~YAC5B~~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","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, h, Prop, Watch } from '@stencil/core';\nimport { assignDescription, messageId, exposeTypeProperty } from '../../utils/form';\nimport { danger } from '@pine-ds/icons/icons';\n\nimport { inheritAriaAttributes } from '@utils/attributes';\nimport type { Attributes } from '@utils/attributes';\n\n@Component({\n tag: 'pds-switch',\n styleUrls: ['../../global/styles/utils/label.scss', 'pds-switch.scss'],\n shadow: true,\n formAssociated: true,\n})\nexport class PdsSwitch {\n private inheritedAttributes: Attributes = {};\n private internals?: ElementInternals;\n private readonly _type = 'checkbox' as const;\n\n @Element() el: HTMLPdsSwitchElement;\n\n /*\n A unique identifier used for the underlying component `id` attribute and the label `for` attribute.\n /\n @Prop() componentId!: string;\n\n /\n Determines the input 'checked' state.\n /\n @Prop({ mutable: true }) checked = false;\n\n /\n Determines the input 'disabled' state, preventing user interaction.\n /\n @Prop() disabled? = false;\n\n /\n Displays message text describing an invalid state.\n /\n @Prop() errorMessage?: string;\n\n /\n Visually hides the label text for instances where only the switch should be displayed. Label remains accessible to assistive technology such as screen readers.\n /\n @Prop() hideLabel: boolean;\n\n /\n Displays help text for additional description of an input.\n /\n @Prop() helperMessage: string;\n\n /\n Determines the input 'invalid' state, signifying an error is present.\n /\n @Prop() invalid? = false;\n\n /\n Displays text to describe the input.\n /\n @Prop() label!: string;\n\n /\n Identifies form data and unifies a group of radio inputs for toggling a single property/value.\n /\n @Prop() name: string;\n\n /\n Determines the 'required' state of the input.\n /\n @Prop() required? = false;\n\n /\n Provides input with a string submitted in form data.\n /\n @Prop() value: string;\n\n\n /\n Emits an event on input change.\n */\n @Event() pdsSwitchChange: EventEmitter<InputEvent>;\n\n private onSwitchUpdate = (e: Event) => {\n if (this.disabled) return;\n\n const input = e.target as HTMLInputElement;\n this.checked = input.checked;\n\n this.updateFormValue();\n\n this.pdsSwitchChange.emit(e as InputEvent);\n };\n\n private switchClassNames = () => {\n let switchClasses = `pds-switch`;\n\n if (this.invalid === true) {\n switchClasses += \" pds-switch--error\";\n }\n if (this.helperMessage !== undefined) {\n switchClasses += \" pds-switch--message\";\n }\n return switchClasses;\n };\n\n connectedCallback() {\n if (this.el.attachInternals) {\n this.internals = this.el.attachInternals();\n }\n\n // Expose type property on the element instance to match native form element behavior\n exposeTypeProperty(this.el, () => this._type);\n }\n\n componentDidLoad() {\n this.updateFormValue();\n }\n\n @Watch('checked')\n checkedChanged() {\n this.updateFormValue();\n }\n\n private updateFormValue() {\n if (typeof jest !== 'undefined' \|\| typeof process !== 'undefined' && process.env?.NODE_ENV === 'test') {\n return;\n }\n\n if (this.internals && this.internals.setFormValue) {\n // For switches, only send the value when checked, otherwise send null\n const formValue = this.checked ? (this.value \|\| 'on') : null;\n this.internals.setFormValue(formValue);\n }\n\n if (this.internals && this.internals.setValidity) {\n this.internals.setValidity({});\n }\n }\n\n formStateRestoreCallback(state: string \| FormData \| null) {\n if (state instanceof FormData) {\n // For switches, restore if the value exists in FormData\n const value = this.value \|\| 'on';\n this.checked = state.get(this.name \|\| this.componentId) === value;\n } else if (typeof state === 'string') {\n // Restore from string state\n this.checked = state === (this.value \|\| 'on');\n }\n }\n\n componentWillLoad() {\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.el)\n }\n }\n\n render() {\n return (\n <Host class={this.switchClassNames()} aria-disabled={this.disabled ? 'true' : null}>\n <label htmlFor={this.componentId}>\n <input\n aria-describedby={assignDescription(this.componentId, this.invalid, this.errorMessage \|\| this.helperMessage)}\n aria-invalid={this.invalid ? \"true\" : undefined}\n checked={this.checked}\n class=\"pds-switch__input\"\n disabled={this.disabled}\n id={this.componentId}\n name={this.name ? this.name : this.componentId}\n onChange={this.onSwitchUpdate}\n required={this.required}\n type=\"checkbox\"\n value={this.value}\n {...this.inheritedAttributes}\n />\n <span class={this.hideLabel ? 'visually-hidden' : ''}>\n {this.label}\n </span>\n </label>\n {this.helperMessage &&\n <div\n class={`pds-switch__message`}\n id={messageId(this.componentId, 'helper')}\n >\n {this.helperMessage}\n </div>\n }\n {this.errorMessage &&\n <div\n class={`pds-switch__message pds-switch__message--error`}\n id={messageId(this.componentId, 'error')}\n aria-live=\"assertive\"\n >\n <pds-icon icon={danger} size=\"small\" />\n {this.errorMessage}\n </div>\n }\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"pds-switch.js","sourceRoot":"","sources":["../../../../src/components/pds-switch/pds-switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, h, Prop, Watch } from '@stencil/core';\nimport { assignDescription, messageId, exposeTypeProperty } from '../../utils/form';\nimport { danger } from '@pine-ds/icons/icons';\n\nimport { inheritAriaAttributes } from '@utils/attributes';\nimport type { Attributes } from '@utils/attributes';\n\n@Component({\n tag: 'pds-switch',\n styleUrls: ['../../global/styles/utils/label.scss', 'pds-switch.scss'],\n shadow: true,\n formAssociated: true,\n})\nexport class PdsSwitch {\n private inheritedAttributes: Attributes = {};\n private internals?: ElementInternals;\n private readonly _type = 'checkbox' as const;\n\n @Element() el: HTMLPdsSwitchElement;\n\n /*\n A unique identifier used for the underlying component `id` attribute and the label `for` attribute.\n /\n @Prop() componentId!: string;\n\n /\n Determines the input 'checked' state.\n /\n @Prop({ mutable: true }) checked = false;\n\n /\n Determines the input 'disabled' state, preventing user interaction.\n /\n @Prop() disabled? = false;\n\n /\n Displays message text describing an invalid state.\n /\n @Prop() errorMessage?: string;\n\n /\n Visually hides the label text for instances where only the switch should be displayed. Label remains accessible to assistive technology such as screen readers.\n /\n @Prop() hideLabel: boolean;\n\n /\n Displays help text for additional description of an input.\n /\n @Prop() helperMessage: string;\n\n /\n Determines the input 'invalid' state, signifying an error is present.\n /\n @Prop() invalid? = false;\n\n /\n Displays text to describe the input.\n /\n @Prop() label!: string;\n\n /\n Identifies form data and unifies a group of radio inputs for toggling a single property/value.\n /\n @Prop() name: string;\n\n /\n Determines the 'required' state of the input.\n /\n @Prop() required? = false;\n\n /\n Provides input with a string submitted in form data.\n /\n @Prop() value: string;\n\n\n /\n Emits an event on input change.\n */\n @Event() pdsSwitchChange: EventEmitter<InputEvent>;\n\n private onSwitchUpdate = (e: Event) => {\n if (this.disabled) return;\n\n const input = e.target as HTMLInputElement;\n this.checked = input.checked;\n\n this.updateFormValue();\n\n this.pdsSwitchChange.emit(e as InputEvent);\n };\n\n private switchClassNames = () => {\n let switchClasses = `pds-switch`;\n\n if (this.invalid === true) {\n switchClasses += \" pds-switch--error\";\n }\n if (this.helperMessage !== undefined) {\n switchClasses += \" pds-switch--message\";\n }\n return switchClasses;\n };\n\n connectedCallback() {\n // Initialize ElementInternals for form association (only once per element instance)\n if (this.el.attachInternals && !this.internals) {\n this.internals = this.el.attachInternals();\n }\n\n // Expose type property on the element instance to match native form element behavior\n exposeTypeProperty(this.el, () => this._type);\n }\n\n componentDidLoad() {\n this.updateFormValue();\n }\n\n @Watch('checked')\n checkedChanged() {\n this.updateFormValue();\n }\n\n private updateFormValue() {\n if (typeof jest !== 'undefined' \|\| typeof process !== 'undefined' && process.env?.NODE_ENV === 'test') {\n return;\n }\n\n if (this.internals && this.internals.setFormValue) {\n // For switches, only send the value when checked, otherwise send null\n const formValue = this.checked ? (this.value \|\| 'on') : null;\n this.internals.setFormValue(formValue);\n }\n\n if (this.internals && this.internals.setValidity) {\n this.internals.setValidity({});\n }\n }\n\n formStateRestoreCallback(state: string \| FormData \| null) {\n if (state instanceof FormData) {\n // For switches, restore if the value exists in FormData\n const value = this.value \|\| 'on';\n this.checked = state.get(this.name \|\| this.componentId) === value;\n } else if (typeof state === 'string') {\n // Restore from string state\n this.checked = state === (this.value \|\| 'on');\n }\n }\n\n componentWillLoad() {\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.el)\n }\n }\n\n render() {\n return (\n <Host class={this.switchClassNames()} aria-disabled={this.disabled ? 'true' : null}>\n <label htmlFor={this.componentId}>\n <input\n aria-describedby={assignDescription(this.componentId, this.invalid, this.errorMessage \|\| this.helperMessage)}\n aria-invalid={this.invalid ? \"true\" : undefined}\n checked={this.checked}\n class=\"pds-switch__input\"\n disabled={this.disabled}\n id={this.componentId}\n name={this.name ? this.name : this.componentId}\n onChange={this.onSwitchUpdate}\n required={this.required}\n type=\"checkbox\"\n value={this.value}\n {...this.inheritedAttributes}\n />\n <span class={this.hideLabel ? 'visually-hidden' : ''}>\n {this.label}\n </span>\n </label>\n {this.helperMessage &&\n <div\n class={`pds-switch__message`}\n id={messageId(this.componentId, 'helper')}\n >\n {this.helperMessage}\n </div>\n }\n {this.errorMessage &&\n <div\n class={`pds-switch__message pds-switch__message--error`}\n id={messageId(this.componentId, 'error')}\n aria-live=\"assertive\"\n >\n <pds-icon icon={danger} size=\"small\" />\n {this.errorMessage}\n </div>\n }\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/pds-table/pds-table-body/pds-table-body.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class PdsTableBody {
     render() {
-        return (h(Host, { key: '299a00424cf34acb2d2cbddf2c51c853558f270d', role: "rowgroup", part: "body" }, h("slot", { key: '718b97595d037cf6c19e8bfb2a9702a2a3fc1058' })));
+        return (h(Host, { key: '1f6ce73abaf0ecb3f592f754bedef557c7ea197d', role: "rowgroup", part: "body" }, h("slot", { key: '4a9758bb6c17de60cb345216d9b3e7c58cd44499' })));
     }
     static get is() { return "pds-table-body"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-table/pds-table-cell/pds-table-cell.js CHANGED Viewed

@@ -94,11 +94,11 @@ export class PdsTableCell {
         return classNames.join(' ');
     }
     render() {
-        return (h(Host, { key: '996bf5f70f450e57b0c44023ddf5f44f6af8e367', class: this.classNames(), role: "gridcell", part: "cell", style: this.tableRef &&
+        return (h(Host, { key: '102c412e68bd877ee88866d2c66838d62cb7cab2', class: this.classNames(), role: "gridcell", part: "cell", style: this.tableRef &&
                 this.tableRef.fixedColumn &&
                 this.tableRef.selectable
                 ? { '--fixed-cell-position': '40px' }
-                : {} }, h("slot", { key: 'f6e5fc35adeb18fa939534f3b409b282d121a797' })));
+                : {} }, h("slot", { key: 'fae2d378d6e1c5c3abb34cb4a75b74930d56965c' })));
     }
     static get is() { return "pds-table-cell"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-table/pds-table-head/pds-table-head.js CHANGED Viewed

@@ -42,7 +42,7 @@ export class PdsTableHead {
         }
     }
     render() {
-        return (h(Host, { key: 'ebcbe90052f2f4b5aa6e3a09a7b23c46e5aba90f', role: "row", part: "head" }, this.tableRef && this.tableRef.selectable && (h("pds-table-head-cell", { key: 'cd43463e58db8244439d07b3826534a70028c1a4', part: this.tableRef.selectable ? 'checkbox-cell' : '' }, h("pds-checkbox", { key: 'd6f4e05806a2c823188bc01fdc7a299aab9bf7d7', componentId: this.generateUniqueId(), indeterminate: this.indeterminate, onInput: this.handleInput, label: "Select All Rows", hideLabel: true, checked: this.isSelected, part: "select-all-checkbox" }))), h("slot", { key: '8f86dd51b56f5c37cdcfbd3b2513b0e92c6e4c14' })));
+        return (h(Host, { key: 'b68c0d7259cfced019c138dc4504c142e7e12ff9', role: "row", part: "head" }, this.tableRef && this.tableRef.selectable && (h("pds-table-head-cell", { key: '90c91ee525359986e7878e8ae647411bf9b4a637', part: this.tableRef.selectable ? 'checkbox-cell' : '' }, h("pds-checkbox", { key: 'd79ebef09df3424ed36d8838ecdc5ca6a0029c8a', componentId: this.generateUniqueId(), indeterminate: this.indeterminate, onInput: this.handleInput, label: "Select All Rows", hideLabel: true, checked: this.isSelected, part: "select-all-checkbox" }))), h("slot", { key: '17eca8a861fceb73b8d957ab0d5ba2cf7b256b55' })));
     }
     static get is() { return "pds-table-head"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-table/pds-table-head-cell/pds-table-head-cell.js CHANGED Viewed

@@ -28,6 +28,11 @@ export class PdsTableHeadCell {
          * @defaultValue false
          */
         this.hasHeadBackground = false;
+        /**
+         * Determines if this column is the currently active sorted column.
+         * @defaultValue false
+         */
+        this.isActive = false;
         /**
          * Handles scroll events to update fixed column shadow state.
          * Updates the tableScrolling state to control CSS classes for fixed column shadows.
@@ -46,12 +51,25 @@ export class PdsTableHeadCell {
         };
         this.toggleSort = () => {
             if (this.sortable) {
+                // Guard: return early if tableRef is not available
+                if (!this.tableRef) {
+                    return;
+                }
                 const column = this.hostElement.innerText.trim();
+                // Always toggle the direction (preserves original behavior)
                 this.sortingDirection = this.sortingDirection === 'asc' ? 'desc' : 'asc';
-                this.tableRef.querySelectorAll('pds-table-head-cell').forEach((headCell) => {
-                    headCell.classList.remove('is-active');
+                // Reset all OTHER head cells to inactive state (skip the current one)
+                this.tableRef.querySelectorAll('pds-table-head-cell').forEach(async (headCell) => {
+                    // Skip clearing the current cell
+                    if (headCell !== this.hostElement) {
+                        const headCellComponent = headCell;
+                        await headCellComponent.clearActiveSort();
+                    }
                 });
-                this.hostElement.classList.toggle('is-active');
+                // Mark this column as active
+                this.isActive = true;
+                this.hostElement.classList.add('is-active');
+                // Emit the sort event with the current direction
                 this.pdsTableSort.emit({ column, direction: this.sortingDirection });
             }
         };
@@ -65,8 +83,17 @@ export class PdsTableHeadCell {
         if (!this.sortable)
             return;
         this.sortingDirection = direction;
+        this.isActive = true;
         this.hostElement.classList.add('is-active');
     }
+    /**
+     * Clears the active sort state from this column.
+     * Used internally when another column becomes active.
+     */
+    async clearActiveSort() {
+        this.isActive = false;
+        this.hostElement.classList.remove('is-active');
+    }
     componentWillLoad() {
         // Set initial references and state before first render
         this.tableRef = this.hostElement.closest('pds-table');
@@ -171,11 +198,11 @@ export class PdsTableHeadCell {
         return classNames.join(' ');
     }
     render() {
-        return (h(Host, { key: '18228c7b1950668f12f983d9e5364bbf2deb3f1a', class: this.classNames(), role: "columnheader", onClick: this.toggleSort, part: "head-cell", style: this.tableRef &&
+        return (h(Host, { key: '7e85fb5e6b5fc1022034db9e4c94ca13dfc56257', class: this.classNames(), role: "columnheader", onClick: this.toggleSort, part: "head-cell", style: this.tableRef &&
                 this.tableRef.fixedColumn &&
                 this.tableRef.selectable
                 ? { '--fixed-cell-position': '40px' }
-                : {} }, h("slot", { key: '283f5e031cc8fe521c25af8060ce51c3ebaffa93' }), this.sortable && (h("pds-icon", { key: 'a7e172c6fbf1185ab9885af04bcf2f2449370e6b', icon: this.sortingDirection === 'asc' ? upSmall : downSmall, part: "sort-icon" }))));
+                : {} }, h("slot", { key: '97d2b9621f7d61ad42719a4cc9f640a1210d78dc' }), this.sortable && this.isActive && (h("pds-icon", { key: 'd80efe9b417ae34bf50f65b0e9cb15bcc9aabd40', icon: this.sortingDirection === 'asc' ? upSmall : downSmall, part: "sort-icon" }))));
     }
     static get is() { return "pds-table-head-cell"; }
     static get encapsulation() { return "shadow"; }
@@ -237,7 +264,8 @@ export class PdsTableHeadCell {
             "tableScrolling": {},
             "isSelected": {},
             "hasHeadBorder": {},
-            "hasHeadBackground": {}
+            "hasHeadBackground": {},
+            "isActive": {}
         };
     }
     static get events() {
@@ -283,6 +311,23 @@ export class PdsTableHeadCell {
                             "text": "direction - The sort direction to apply ('asc' or 'desc')"
                         }]
                 }
+            },
+            "clearActiveSort": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Clears the active sort state from this column.\nUsed internally when another column becomes active.",
+                    "tags": []
+                }
             }
         };
     }

package/dist/collection/components/pds-table/pds-table-head-cell/pds-table-head-cell.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pds-table-head-cell.js","sourceRoot":"","sources":["../../../../../src/components/pds-table/pds-table-head-cell/pds-table-head-cell.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Prop, h, Event, EventEmitter, State, Method } from '@stencil/core';\n\nimport { downSmall, upSmall } from '@pine-ds/icons/icons';\n\n@Component({\n tag: 'pds-table-head-cell',\n styleUrls: ['pds-table-head-cell.scss'],\n shadow: true,\n})\nexport class PdsTableHeadCell {\n @Element() hostElement: HTMLPdsTableHeadCellElement;\n private tableRef: HTMLPdsTableElement;\n private scrollContainer: HTMLElement \| null = null;\n private setupTimer: number \| undefined;\n private setupRetries: number = 0;\n private headObserver?: MutationObserver;\n\n /*\n Sets the text alignment within the head cell.\n /\n @Prop() cellAlign?: 'start' \| 'center' \| 'end' \| 'justify';\n\n /\n Determines whether the table column is sortable when set to `true`.\n /\n @Prop() sortable: boolean;\n\n /\n Event emitted to signal that a table column header has been sorted, providing information about the sorted column's name and sorting direction.\n /\n @Event() pdsTableSort: EventEmitter<{ column: string; direction: string }>;\n\n /\n The direction of sorting.\n /\n @State() private sortingDirection: 'asc' \| 'desc' = 'asc';\n\n /\n Determines if the table is currently scrolling.\n * @defaultValue false\n /\n @State() private tableScrolling: boolean = false;\n\n /\n Determines if the table row is currently selected.\n * @defaultValue false\n /\n @State() isSelected: boolean = false;\n\n /\n Determines if the parent table-head has the border attribute.\n * @defaultValue false\n /\n @State() private hasHeadBorder: boolean = false;\n\n /\n Determines if the parent table-head has the background attribute.\n * @defaultValue false\n /\n @State() private hasHeadBackground: boolean = false;\n\n /\n Programmatically sets this column as the active sort column with the specified direction.\n * Used by pds-table to apply a default sort on initial load.\n * @param direction - The sort direction to apply ('asc' or 'desc')\n /\n @Method()\n async setActiveSort(direction: 'asc' \| 'desc') {\n if (!this.sortable) return;\n\n this.sortingDirection = direction;\n this.hostElement.classList.add('is-active');\n }\n\n componentWillLoad() {\n // Set initial references and state before first render\n this.tableRef = this.hostElement.closest('pds-table') as HTMLPdsTableElement;\n\n const tableHead = this.hostElement.closest('pds-table-head') as HTMLElement;\n if (tableHead) {\n this.hasHeadBorder = tableHead.hasAttribute('border');\n this.hasHeadBackground = tableHead.hasAttribute('background');\n }\n }\n\n componentDidLoad() {\n if (this.tableRef && this.tableRef.responsive && this.tableRef.fixedColumn) {\n // For responsive tables with fixed columns, set up scroll detection\n // This enables the first column header to show a shadow when the table is scrolled horizontally\n this.setupScrollListener();\n }\n\n // Watch for changes to the parent table-head's border and background attributes\n const tableHead = this.hostElement.closest('pds-table-head') as HTMLElement;\n if (tableHead && typeof MutationObserver !== 'undefined') {\n // Defensive guard: disconnect existing observer before creating a new one\n if (this.headObserver) {\n this.headObserver.disconnect();\n }\n\n this.headObserver = new MutationObserver(() => {\n // Update state when border or background attributes change\n this.hasHeadBorder = tableHead.hasAttribute('border');\n this.hasHeadBackground = tableHead.hasAttribute('background');\n });\n\n this.headObserver.observe(tableHead, {\n attributes: true,\n attributeFilter: ['border', 'background']\n });\n }\n }\n\n disconnectedCallback() {\n this.cleanupScrollListener();\n\n if (this.headObserver) {\n this.headObserver.disconnect();\n }\n }\n\n\n private setupScrollListener() {\n if (!this.tableRef) return;\n\n // Query shadowRoot once and cache the container\n const container = this.tableRef.shadowRoot?.querySelector('.pds-table-responsive-container') as HTMLElement;\n\n if (container) {\n // Container available immediately\n this.scrollContainer = container;\n this.scrollContainer.addEventListener('scroll', this.handleScroll, { passive: true });\n this.handleScroll(); // Initial check\n this.setupRetries = 0; // Reset counter on success\n } else {\n // Container not ready, set up timer for retry with bounds\n this.setupTimer = window.setTimeout(() => {\n if (this.scrollContainer) return; // Already found\n this.setupRetries = (this.setupRetries \|\| 0) + 1;\n if (this.setupRetries <= 50) {\n this.setupScrollListener();\n } else {\n console.warn('Failed to find responsive container after 50 attempts');\n }\n }, 100);\n }\n }\n\n private cleanupScrollListener() {\n if (this.scrollContainer) {\n this.scrollContainer.removeEventListener('scroll', this.handleScroll);\n this.scrollContainer = null;\n }\n\n if (this.setupTimer !== undefined) {\n window.clearTimeout(this.setupTimer);\n this.setupTimer = undefined;\n }\n\n this.setupRetries = 0; // Reset retry counter\n }\n\n /\n Handles scroll events to update fixed column shadow state.\n * Updates the tableScrolling state to control CSS classes for fixed column shadows.\n * @private\n */\n private handleScroll = () => {\n if (!this.scrollContainer) {\n return;\n }\n\n try {\n this.tableScrolling = this.scrollContainer.scrollLeft > 0;\n } catch (error) {\n console.warn('Scroll handler error:', error);\n }\n };\n\n private toggleSort = () => {\n if (this.sortable) {\n const column = this.hostElement.innerText.trim();\n this.sortingDirection = this.sortingDirection === 'asc' ? 'desc' : 'asc';\n\n this.tableRef.querySelectorAll('pds-table-head-cell').forEach((headCell) => {\n headCell.classList.remove('is-active');\n });\n\n this.hostElement.classList.toggle('is-active');\n this.pdsTableSort.emit({ column, direction: this.sortingDirection });\n }\n }\n\n private classNames() {\n const classNames = [];\n\n if (this.tableRef && this.tableRef.compact) {\n classNames.push('is-compact');\n }\n\n if (this.cellAlign) {\n classNames.push(`pds-table-head-cell--align-${this.cellAlign}`);\n }\n\n if (this.sortable) {\n classNames.push('is-sortable');\n }\n\n if (this.sortable && this.sortingDirection !== null) {\n classNames.push('sort-' + this.sortingDirection);\n }\n\n if (this.tableRef && this.tableRef.fixedColumn && this.tableScrolling) {\n classNames.push('has-scrolled');\n }\n\n if (this.hasHeadBackground) {\n classNames.push('has-head-background');\n }\n\n if (this.hasHeadBorder) {\n classNames.push('has-head-border');\n }\n\n return classNames.join(' ');\n }\n\n render() {\n return (\n <Host\n class={this.classNames()}\n role=\"columnheader\"\n onClick={this.toggleSort}\n part=\"head-cell\"\n style={\n this.tableRef &&\n this.tableRef.fixedColumn &&\n this.tableRef.selectable\n ? { '--fixed-cell-position': '40px' }\n : {}\n }\n >\n <slot></slot>\n {this.sortable && (\n <pds-icon icon={this.sortingDirection === 'asc' ? upSmall : downSmall} part=\"sort-icon\" />\n )}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"pds-table-head-cell.js","sourceRoot":"","sources":["../../../../../src/components/pds-table/pds-table-head-cell/pds-table-head-cell.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Prop, h, Event, EventEmitter, State, Method } from '@stencil/core';\n\nimport { downSmall, upSmall } from '@pine-ds/icons/icons';\n\n@Component({\n tag: 'pds-table-head-cell',\n styleUrls: ['pds-table-head-cell.scss'],\n shadow: true,\n})\nexport class PdsTableHeadCell {\n @Element() hostElement: HTMLPdsTableHeadCellElement;\n private tableRef: HTMLPdsTableElement;\n private scrollContainer: HTMLElement \| null = null;\n private setupTimer: number \| undefined;\n private setupRetries: number = 0;\n private headObserver?: MutationObserver;\n\n /*\n Sets the text alignment within the head cell.\n /\n @Prop() cellAlign?: 'start' \| 'center' \| 'end' \| 'justify';\n\n /\n Determines whether the table column is sortable when set to `true`.\n /\n @Prop() sortable: boolean;\n\n /\n Event emitted to signal that a table column header has been sorted, providing information about the sorted column's name and sorting direction.\n /\n @Event() pdsTableSort: EventEmitter<{ column: string; direction: string }>;\n\n /\n The direction of sorting.\n /\n @State() private sortingDirection: 'asc' \| 'desc' = 'asc';\n\n /\n Determines if the table is currently scrolling.\n * @defaultValue false\n /\n @State() private tableScrolling: boolean = false;\n\n /\n Determines if the table row is currently selected.\n * @defaultValue false\n /\n @State() isSelected: boolean = false;\n\n /\n Determines if the parent table-head has the border attribute.\n * @defaultValue false\n /\n @State() private hasHeadBorder: boolean = false;\n\n /\n Determines if the parent table-head has the background attribute.\n * @defaultValue false\n /\n @State() private hasHeadBackground: boolean = false;\n\n /\n Determines if this column is the currently active sorted column.\n * @defaultValue false\n /\n @State() private isActive: boolean = false;\n\n /\n Programmatically sets this column as the active sort column with the specified direction.\n * Used by pds-table to apply a default sort on initial load.\n * @param direction - The sort direction to apply ('asc' or 'desc')\n /\n @Method()\n async setActiveSort(direction: 'asc' \| 'desc') {\n if (!this.sortable) return;\n\n this.sortingDirection = direction;\n this.isActive = true;\n this.hostElement.classList.add('is-active');\n }\n\n /\n Clears the active sort state from this column.\n * Used internally when another column becomes active.\n /\n @Method()\n async clearActiveSort() {\n this.isActive = false;\n this.hostElement.classList.remove('is-active');\n }\n\n componentWillLoad() {\n // Set initial references and state before first render\n this.tableRef = this.hostElement.closest('pds-table') as HTMLPdsTableElement;\n\n const tableHead = this.hostElement.closest('pds-table-head') as HTMLElement;\n if (tableHead) {\n this.hasHeadBorder = tableHead.hasAttribute('border');\n this.hasHeadBackground = tableHead.hasAttribute('background');\n }\n }\n\n componentDidLoad() {\n if (this.tableRef && this.tableRef.responsive && this.tableRef.fixedColumn) {\n // For responsive tables with fixed columns, set up scroll detection\n // This enables the first column header to show a shadow when the table is scrolled horizontally\n this.setupScrollListener();\n }\n\n // Watch for changes to the parent table-head's border and background attributes\n const tableHead = this.hostElement.closest('pds-table-head') as HTMLElement;\n if (tableHead && typeof MutationObserver !== 'undefined') {\n // Defensive guard: disconnect existing observer before creating a new one\n if (this.headObserver) {\n this.headObserver.disconnect();\n }\n\n this.headObserver = new MutationObserver(() => {\n // Update state when border or background attributes change\n this.hasHeadBorder = tableHead.hasAttribute('border');\n this.hasHeadBackground = tableHead.hasAttribute('background');\n });\n\n this.headObserver.observe(tableHead, {\n attributes: true,\n attributeFilter: ['border', 'background']\n });\n }\n }\n\n disconnectedCallback() {\n this.cleanupScrollListener();\n\n if (this.headObserver) {\n this.headObserver.disconnect();\n }\n }\n\n\n private setupScrollListener() {\n if (!this.tableRef) return;\n\n // Query shadowRoot once and cache the container\n const container = this.tableRef.shadowRoot?.querySelector('.pds-table-responsive-container') as HTMLElement;\n\n if (container) {\n // Container available immediately\n this.scrollContainer = container;\n this.scrollContainer.addEventListener('scroll', this.handleScroll, { passive: true });\n this.handleScroll(); // Initial check\n this.setupRetries = 0; // Reset counter on success\n } else {\n // Container not ready, set up timer for retry with bounds\n this.setupTimer = window.setTimeout(() => {\n if (this.scrollContainer) return; // Already found\n this.setupRetries = (this.setupRetries \|\| 0) + 1;\n if (this.setupRetries <= 50) {\n this.setupScrollListener();\n } else {\n console.warn('Failed to find responsive container after 50 attempts');\n }\n }, 100);\n }\n }\n\n private cleanupScrollListener() {\n if (this.scrollContainer) {\n this.scrollContainer.removeEventListener('scroll', this.handleScroll);\n this.scrollContainer = null;\n }\n\n if (this.setupTimer !== undefined) {\n window.clearTimeout(this.setupTimer);\n this.setupTimer = undefined;\n }\n\n this.setupRetries = 0; // Reset retry counter\n }\n\n /\n Handles scroll events to update fixed column shadow state.\n * Updates the tableScrolling state to control CSS classes for fixed column shadows.\n * @private\n */\n private handleScroll = () => {\n if (!this.scrollContainer) {\n return;\n }\n\n try {\n this.tableScrolling = this.scrollContainer.scrollLeft > 0;\n } catch (error) {\n console.warn('Scroll handler error:', error);\n }\n };\n\n private toggleSort = () => {\n if (this.sortable) {\n // Guard: return early if tableRef is not available\n if (!this.tableRef) {\n return;\n }\n\n const column = this.hostElement.innerText.trim();\n \n // Always toggle the direction (preserves original behavior)\n this.sortingDirection = this.sortingDirection === 'asc' ? 'desc' : 'asc';\n \n // Reset all OTHER head cells to inactive state (skip the current one)\n this.tableRef.querySelectorAll('pds-table-head-cell').forEach(async (headCell) => {\n // Skip clearing the current cell\n if (headCell !== this.hostElement) {\n const headCellComponent = headCell as HTMLPdsTableHeadCellElement;\n await headCellComponent.clearActiveSort();\n }\n });\n \n // Mark this column as active\n this.isActive = true;\n this.hostElement.classList.add('is-active');\n\n // Emit the sort event with the current direction\n this.pdsTableSort.emit({ column, direction: this.sortingDirection });\n }\n }\n\n private classNames() {\n const classNames = [];\n\n if (this.tableRef && this.tableRef.compact) {\n classNames.push('is-compact');\n }\n\n if (this.cellAlign) {\n classNames.push(`pds-table-head-cell--align-${this.cellAlign}`);\n }\n\n if (this.sortable) {\n classNames.push('is-sortable');\n }\n\n if (this.sortable && this.sortingDirection !== null) {\n classNames.push('sort-' + this.sortingDirection);\n }\n\n if (this.tableRef && this.tableRef.fixedColumn && this.tableScrolling) {\n classNames.push('has-scrolled');\n }\n\n if (this.hasHeadBackground) {\n classNames.push('has-head-background');\n }\n\n if (this.hasHeadBorder) {\n classNames.push('has-head-border');\n }\n\n return classNames.join(' ');\n }\n\n render() {\n return (\n <Host\n class={this.classNames()}\n role=\"columnheader\"\n onClick={this.toggleSort}\n part=\"head-cell\"\n style={\n this.tableRef &&\n this.tableRef.fixedColumn &&\n this.tableRef.selectable\n ? { '--fixed-cell-position': '40px' }\n : {}\n }\n >\n <slot></slot>\n {this.sortable && this.isActive && (\n <pds-icon icon={this.sortingDirection === 'asc' ? upSmall : downSmall} part=\"sort-icon\" />\n )}\n </Host>\n );\n }\n}\n"]}

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

@@ -137,7 +137,7 @@ export class PdsTableRow {
         }
     }
     render() {
-        return (h(Host, { key: 'dedf37f2841e51a325b6c414d3e7ec0072bdf78f', class: this.classNames(), role: "row", part: "row" }, this.tableRef && this.tableRef.selectable && (h("pds-table-cell", { key: '3e9295398c8f48cb7aa78d10daf5201ae8f86e9f', part: this.tableRef.fixedColumn ? 'checkbox-cell' : 'checkbox-cell', class: this.tableRef.selectable ? 'has-checkbox' : '' }, h("pds-checkbox", { key: 'b786f181988110d3e3d47928da9290dfd79f5fbd', componentId: this.generateUniqueId(), onClick: this.handleClick, indeterminate: this.indeterminate, label: "Select Row", hideLabel: true, checked: this.isSelected, part: "row-checkbox" }))), h("slot", { key: 'd37e3d44d34f81553060185d96fb44a55a40edc8' })));
+        return (h(Host, { key: '900905bc103a54d3f13b59a66cfd53178de0da49', class: this.classNames(), role: "row", part: "row" }, this.tableRef && this.tableRef.selectable && (h("pds-table-cell", { key: 'f5a5a0426f15182e278b052090c71f45e8848347', part: this.tableRef.fixedColumn ? 'checkbox-cell' : 'checkbox-cell', class: this.tableRef.selectable ? 'has-checkbox' : '' }, h("pds-checkbox", { key: '1fd91b0d4bf412dc3a2705fcb5909e42a54bde56', componentId: this.generateUniqueId(), onClick: this.handleClick, indeterminate: this.indeterminate, label: "Select Row", hideLabel: true, checked: this.isSelected, part: "row-checkbox" }))), h("slot", { key: '17a60a0251a36613cc8631efe780020d4a5e1167' })));
     }
     static get is() { return "pds-table-row"; }
     static get encapsulation() { return "shadow"; }

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

@@ -142,7 +142,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>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">
@@ -157,7 +157,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>
@@ -171,7 +179,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>
@@ -185,7 +201,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-body>
 </pds-table>`;
@@ -198,6 +222,8 @@ const SortableTemplate = (args) => html`
   ?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}
@@ -382,6 +408,8 @@ Sortable.args = {
   rowDividers: false,
   selectable: false,
   sortable: true,
+  defaultSortColumn: 'Name',
+  defaultSortDirection: 'asc',
 };
 export const DefaultSorting = DefaultSortTemplate.bind();

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

@@ -183,17 +183,21 @@ pds-tab {
   border-color: var(--pine-color-border);
   box-shadow: var(--pine-box-shadow-100);
   color: var(--pine-color-text-active);
-  /* 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-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);
 }

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

@@ -26,9 +26,9 @@ export class PdsTab {
         return classes.filter(Boolean).join(' ');
     }
     render() {
-        const availabilityTabEdgeInlineStart = (h("span", { key: '7a70cf5b681ec05215920417c4ba590fed238f63', class: "pds-tab-edge", role: "presentation" }));
-        const availabilityTabEdgeInlineEnd = (h("span", { key: '21a1422bb00a6221f7db1b0e77abcd024eec60cd', class: "pds-tab-edge pds-tab-edge--end", role: "presentation" }));
-        return (h(Host, { key: 'bcf73da727080cdb5b9ec7356768dd2cefab44ae', variant: this.variant, slot: "tabs", index: this.index }, h("button", { key: '25e140fc63a8ddaa44d08198f14d568bca83f16a', role: "tab", id: this.parentComponentId + "__" + this.name, "aria-controls": this.parentComponentId + "__" + this.name + "-panel", tabindex: this.disabled ? "-1" : (this.selected ? "0" : "-1"), "aria-selected": this.selected ? "true" : "false", "aria-disabled": this.disabled ? "true" : null, disabled: this.disabled, class: this.classNames(), onClick: this.onTabClick.bind(this, this.index, this.parentComponentId) }, this.variant === "availability" && availabilityTabEdgeInlineStart, this.variant === "availability" && availabilityTabEdgeInlineEnd, h("div", { key: '002252b89b74bf2ab26bb33331f4296a22a4cf70', class: "pds-tab__content" }, h("slot", { key: '1f67182b80504391a87509567cb68ca8ff6f9b22' })))));
+        const availabilityTabEdgeInlineStart = (h("span", { key: 'e8e263009d29fea16f1cf51de545f07d3529568d', class: "pds-tab-edge", role: "presentation" }));
+        const availabilityTabEdgeInlineEnd = (h("span", { key: 'f492586e916cddbbdf04c3a2cdb84ad0d669df36', class: "pds-tab-edge pds-tab-edge--end", role: "presentation" }));
+        return (h(Host, { key: 'ec4c47883d2a1721d7986a152f787852352cb058', variant: this.variant, slot: "tabs", index: this.index }, h("button", { key: '2f2436892e5cf20e777bf9624c022a88177776dd', role: "tab", id: this.parentComponentId + "__" + this.name, "aria-controls": this.parentComponentId + "__" + this.name + "-panel", tabindex: this.disabled ? "-1" : (this.selected ? "0" : "-1"), "aria-selected": this.selected ? "true" : "false", "aria-disabled": this.disabled ? "true" : null, disabled: this.disabled, class: this.classNames(), onClick: this.onTabClick.bind(this, this.index, this.parentComponentId) }, this.variant === "availability" && availabilityTabEdgeInlineStart, this.variant === "availability" && availabilityTabEdgeInlineEnd, h("div", { key: '202d34facfc70b5ca3ef6dfb9d9a2f36a09747d2', class: "pds-tab__content" }, h("slot", { key: '002cc5de784ff0cd01b06688c2205a490c47d27b' })))));
     }
     static get is() { return "pds-tab"; }
     static get originalStyleUrls() {

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

@@ -8,7 +8,7 @@ export class PdsTabpanel {
         this.selected = false; // eslint-disable-line @stencil-community/strict-mutable
     }
     render() {
-        return (h(Host, { key: 'f7a2009fbf7cb1da7aaed92c64fd4e80b83c9ad3', slot: "tabpanels" }, h("div", { key: '696804cadb97707558ef8c4a7cb90529fbf14c87', 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: '25b1a21995505a25af429038d2b3394063db723f' }))));
+        return (h(Host, { key: '0f64285738a96afa3cf2e1134201e942cf04b0ee', slot: "tabpanels" }, h("div", { key: 'f677ed3b377ce2f5f6868831369338829af89868', 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: '46a236b465f387508aa494ecf80aa146cecd4ade' }))));
     }
     static get is() { return "pds-tabpanel"; }
     static get originalStyleUrls() {

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

@@ -87,7 +87,7 @@ export class PdsTabs {
         this.passPropsToChildren();
     }
     render() {
-        return (h(Host, { key: '94465ebf3e3a10ff9171a8bd890cab85cff52636', "active-tab-name": this.activeTabName, class: this.classNames(), id: this.componentId }, h("div", { key: '3af742499e795c9b4c89d0537aa45679e02cc3b7', class: "pds-tabs__tablist", role: "tablist", "aria-label": this.tablistLabel, part: "tab-list" }, h("slot", { key: '655e6686afd2bc5823c69259f8ee0ba943905ecd', name: "tabs" })), h("slot", { key: '7fdebe4e77cb52ad481ca12af0796db825d31365', name: "tabpanels" })));
+        return (h(Host, { key: 'fee342f0fbc06387fd964a518c0e97a091d1aded', "active-tab-name": this.activeTabName, class: this.classNames(), id: this.componentId }, h("div", { key: '7512b1d02a8320aad1e2934428dec970ff0c1743', class: "pds-tabs__tablist", role: "tablist", "aria-label": this.tablistLabel, part: "tab-list" }, h("slot", { key: 'dccf28dad2d084185e5f1b0f1f1eeab1c77cd541', name: "tabs" })), h("slot", { key: 'bd8b9040808925ea5f1c73c06d636f35c297b4b7', name: "tabpanels" })));
     }
     static get is() { return "pds-tabs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -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: '42a62bfa709c5d093d6559ed073486b6a74e6bf5', style: this.color && setColor(this.color), class: typeClasses, part: "content" }, h("slot", { key: '46dd8be0670070f381bad21df56307595a5c94c9' })));
+        return (h(Tag, { key: '5f7d43603c8d412a375d2e49818b363b5e9a142b', style: this.color && setColor(this.color), class: typeClasses, part: "content" }, h("slot", { key: '702d5065297e0405295aa941cd39dba38787519e' })));
     }
     static get is() { return "pds-text"; }
     static get encapsulation() { return "shadow"; }