@pine-ds/core 3.29.0 → 3.31.1

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

@@ -1031,16 +1031,16 @@ export class PdsMultiselect {
                 'pds-multiselect__trigger--invalid': this.invalid || !!this.errorMessage,
                 'pds-multiselect__trigger--has-value': hasSelections,
                 'pds-multiselect__trigger--pill-inline': true,
-            }, onClick: this.handleTriggerClick }, this.renderInlinePills(), h("button", { ref: el => (this.triggerEl = el), type: "button", id: this.componentId, part: "pill-toggle", class: "pds-multiselect__pill-toggle", disabled: this.disabled, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-labelledby": this.label ? `${this.componentId}-label` : undefined, "aria-required": this.required ? 'true' : undefined, "aria-describedby": assignDescription(this.componentId, this.invalid || !!this.errorMessage, this.errorMessage || this.helperMessage), "aria-invalid": this.invalid || !!this.errorMessage ? 'true' : undefined, onKeyDown: this.handleTriggerKeyDown }, h("pds-icon", { class: "pds-multiselect__icon", icon: enlarge })))) : (h("button", { ref: el => (this.triggerEl = el), type: "button", part: "trigger", class: {
+            }, onClick: this.handleTriggerClick }, this.renderInlinePills(), h("button", { ref: el => (this.triggerEl = el), type: "button", id: this.componentId, part: "pill-toggle", class: "pds-multiselect__pill-toggle", disabled: this.disabled, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-labelledby": this.label ? `${this.componentId}-label` : undefined, "aria-required": this.required ? 'true' : undefined, "aria-describedby": assignDescription(this.componentId, this.invalid || !!this.errorMessage, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid || !!this.errorMessage ? 'true' : undefined, onKeyDown: this.handleTriggerKeyDown }, h("pds-icon", { class: "pds-multiselect__icon", icon: enlarge })))) : (h("button", { ref: el => (this.triggerEl = el), type: "button", part: "trigger", class: {
                 'pds-multiselect__trigger': true,
                 'pds-multiselect__trigger--open': this.isOpen,
                 'pds-multiselect__trigger--disabled': this.disabled,
                 'pds-multiselect__trigger--invalid': this.invalid || !!this.errorMessage,
                 'pds-multiselect__trigger--has-value': hasSelections,
-            }, id: this.componentId, disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-describedby": assignDescription(this.componentId, this.invalid || !!this.errorMessage, this.errorMessage || this.helperMessage), "aria-invalid": this.invalid || !!this.errorMessage ? 'true' : undefined, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, h("span", { class: {
+            }, id: this.componentId, disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-describedby": assignDescription(this.componentId, this.invalid || !!this.errorMessage, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid || !!this.errorMessage ? 'true' : undefined, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, h("span", { class: {
                 'pds-multiselect__trigger-text': true,
                 'pds-multiselect__trigger-text--placeholder': !hasSelections || (this.selectedDisplay === 'pill' && this.pillPosition === 'below'),
-            } }, this.getTriggerText()), h("pds-icon", { class: "pds-multiselect__icon", icon: enlarge }))), this.renderDropdown()), this.selectedDisplay === 'pill' && this.pillPosition === 'below' && this.renderBelowPills(), h("span", { key: '973443f9eb29dcf7fb1bde3f9101ac02967a8fd9', class: "visually-hidden", "aria-live": "polite", "aria-atomic": "true" }, this.removalAnnouncement), this.helperMessage && !(this.errorMessage && this.errorMessage.length > 0) && (h("p", { key: '568aab2b278abb7f4426d84ee926b4883375fb11', class: "pds-multiselect__helper", id: messageId(this.componentId, 'helper') }, this.helperMessage)), this.errorMessage && (h("p", { key: 'daddf192efd47df8c15267b9896913b926e02544', class: "pds-multiselect__error", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: 'd0c72ab75a8e02e61c09e980ae817790804a776a', icon: danger, size: "small" }), this.errorMessage)), h("div", { key: '0453db2fca10b3573b1dd244875f90c856c8887b', style: { display: 'none' } }, h("slot", { key: 'a612741afc9545e5e50c47d27c3c27c1d7cade3c' })))));
+            } }, this.getTriggerText()), h("pds-icon", { class: "pds-multiselect__icon", icon: enlarge }))), this.renderDropdown()), this.selectedDisplay === 'pill' && this.pillPosition === 'below' && this.renderBelowPills(), h("span", { key: '199804f5352818d32542864e3a61f7a9364cc2e3', class: "visually-hidden", "aria-live": "polite", "aria-atomic": "true" }, this.removalAnnouncement), this.helperMessage && !(this.errorMessage && this.errorMessage.length > 0) && (h("p", { key: 'e6855ff0aaf18f59dced2df5d636cadb4d47427b', class: "pds-multiselect__helper", id: messageId(this.componentId, 'helper') }, this.helperMessage)), this.errorMessage && (h("p", { key: '29eae23d8db31b9b9c292d5cd1dc5f641613ed32', class: "pds-multiselect__error", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: 'aad6fd945998957cd28ab6eb97c4d80f0a732ea5', icon: danger, size: "small" }), this.errorMessage)), h("div", { key: '7d0d56a1e097cfc0c7396c1957d16014cb071b1e', style: { display: 'none' } }, h("slot", { key: '6e7fc9dbdab3977248439aa5ea14f13e0f45bbc6' })))));
     }
     static get is() { return "pds-multiselect"; }
     static get encapsulation() { return "shadow"; }

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

@@ -59,6 +59,9 @@
   color: var(--pine-color-text-label-disabled);
   cursor: not-allowed;
 }
+:host(.has-border):has(input:disabled) label::after {
+  cursor: not-allowed;
+}
 :host(.has-border).is-invalid .pds-radio__message--error {
   color: var(--pine-color-text-message-danger);
 }
@@ -255,6 +258,9 @@ label:has(input:disabled) {
   color: var(--pine-color-text-label-disabled);
   cursor: not-allowed;
 }
+:host(.has-image).is-disabled label::after {
+  cursor: not-allowed;
+}
 :host(.has-image).is-disabled .pds-radio__message {
   color: var(--pine-color-text-label-disabled);
 }

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

@@ -78,13 +78,25 @@ export class PdsRadio {
         // Expose type property on the element instance to match native form element behavior
         exposeTypeProperty(this.el, () => this._type);
     }
+    // Discards stale hidden label/message/wrapper copies left by a page-cache (Turbo, bfcache) reconnect, rescuing real [slot="image"] content stranded inside a stale image-container first.
+    componentDidRender() {
+        const freshImageContainer = this.el.querySelector('.pds-radio__image-container:not([hidden])');
+        const staleSelector = '.pds-radio__image-container[hidden], .pds-radio__content-wrapper[hidden], label[hidden], .pds-radio__message[hidden]';
+        Array.from(this.el.querySelectorAll(staleSelector)).forEach((stale) => {
+            const imageSlotContent = stale.querySelector('[slot="image"]');
+            if (imageSlotContent !== null && freshImageContainer !== null) {
+                freshImageContainer.appendChild(imageSlotContent);
+            }
+            stale.remove();
+        });
+    }
     render() {
         const renderLabelAndMessages = () => [
-            h("label", { htmlFor: this.componentId, key: `${this.componentId}-label` }, h("input", { key: '75aca490be2db050f66ddd9cb45ce122bea4db53', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, type: "radio", id: this.componentId, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleRadioChange, class: this.hasImage() ? 'visually-hidden' : '' }), h("span", { key: '1bbc7398d3be35e301526b0f842274a3f1db4457', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)),
+            h("label", { htmlFor: this.componentId, key: `${this.componentId}-label` }, h("input", { key: 'd7534f457e24558e0e206e2de82eac5f59b47d8a', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, type: "radio", id: this.componentId, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleRadioChange, class: this.hasImage() ? 'visually-hidden' : '' }), h("span", { key: 'bfb6a44684fcbb271c38da03b620e97067af6634', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)),
             this.helperMessage && (h("div", { key: `${this.componentId}-helper`, class: 'pds-radio__message', id: messageId(this.componentId, 'helper') }, this.helperMessage)),
-            this.errorMessage && (h("div", { key: `${this.componentId}-error`, class: `pds-radio__message pds-radio__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: 'e1a1228fa52e68623098f09493d93aa03d2e65c4', icon: danger, size: "small" }), this.errorMessage))
+            this.errorMessage && (h("div", { key: `${this.componentId}-error`, class: `pds-radio__message pds-radio__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: 'd0c120ce21687b550b22546330d647f9876ee4d6', icon: danger, size: "small" }), this.errorMessage))
         ];
-        return (h(Host, { key: '60fabeef5778fd30e46cfd23d05684e1743bc57f', class: this.classNames() }, this.hasImage() && (h("div", { key: '9ba3e60182a68cc8e996623cf46e17001ff451f6', class: "pds-radio__image-container", part: "image-container" }, h("slot", { key: 'bf8927129eb68ee7ed07a1f8f8727f013254e133', name: "image", onSlotchange: () => (this._hasImage = this.hasImageSlot()) }))), this.hasImage() ? (h("div", { class: "pds-radio__content-wrapper" }, renderLabelAndMessages())) : (renderLabelAndMessages())));
+        return (h(Host, { key: '55e4f32776bc8a5835801cd7d48b29045d4ce17f', class: this.classNames() }, this.hasImage() && (h("div", { key: '3d9bf1d624c00ea90971638b2de7b548aec73330', class: "pds-radio__image-container", part: "image-container" }, h("slot", { key: 'a256ede1340cf052570330342b1ed9e5f299c821', name: "image", onSlotchange: () => (this._hasImage = this.hasImageSlot()) }))), this.hasImage() ? (h("div", { class: "pds-radio__content-wrapper" }, renderLabelAndMessages())) : (renderLabelAndMessages())));
     }
     static get is() { return "pds-radio"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/pds-radio-group/pds-radio-group.js

@@ -102,6 +102,22 @@ export class PdsRadioGroup {
         }
         this.updateChildRadios();
     }
+    // Unwraps a stale nested .pds-radio-group__radios and discards stale label/message siblings left by a page-cache (Turbo, bfcache) reconnect.
+    componentDidRender() {
+        const radiosContainer = this.el.querySelector('.pds-radio-group__radios');
+        if (radiosContainer === null)
+            return;
+        const staleSelector = '.pds-radio-group__radios, .pds-radio-group__label, .pds-radio-group__message';
+        const findStale = () => Array.from(radiosContainer.children).find((child) => child.matches(staleSelector));
+        let stale = findStale();
+        while (stale !== undefined) {
+            if (stale.matches('.pds-radio-group__radios')) {
+                Array.from(stale.childNodes).forEach((node) => radiosContainer.insertBefore(node, stale));
+            }
+            stale.remove();
+            stale = findStale();
+        }
+    }
     classNames() {
         const classNames = [];
         if (this.invalid) {
@@ -144,13 +160,13 @@ export class PdsRadioGroup {
     render() {
         const gapValue = this.getGapValue();
         const ariaDescribedBy = this.getAriaDescribedBy();
-        return (h(Host, { key: '53949e8e878887189482a13e0402402b8ee79c46', class: this.classNames(), id: this._groupId, role: "group", "aria-describedby": ariaDescribedBy, style: {
+        return (h(Host, { key: '0f6b6ddc2af79fc470c050ed6b5588640fe0d7b6', class: this.classNames(), id: this._groupId, role: "group", "aria-describedby": ariaDescribedBy, style: {
                 '--pds-radio-group-gap': gapValue,
-            } }, this.groupLabel && (h("div", { key: '9aa547ff0b60d1eb78ab6806c552391c119c6511', class: "pds-radio-group__label" }, this.groupLabel)), h("div", { key: '5bad4f6d4c685eca8a97b574511f21b93bdf4821', class: {
+            } }, this.groupLabel && (h("div", { key: '77dbdc4801c3ff50fa3ea6a84d3d6aa51702ad02', class: "pds-radio-group__label" }, this.groupLabel)), h("div", { key: 'c8d7f6aebc39f72a57f353ac2f8677139ac77e71', class: {
                 'pds-radio-group__radios': true,
                 'pds-radio-group__radios--row': this.direction === 'row',
                 'pds-radio-group__radios--column': this.direction === 'column',
-            } }, h("slot", { key: 'ffd76f30b308f124e1df925b2fe354ffb80f59bc', onSlotchange: () => this.updateChildRadios() })), this.helperMessage && (h("div", { key: 'ea8995384b1e1c1e98d01d704bd969a97bfd2b2a', class: "pds-radio-group__message", id: messageId(this._groupId, 'helper') }, this.helperMessage)), this.errorMessage && (h("div", { key: '30726bc368c7ad2820ae4cb43faf0a45e94a51e8', class: "pds-radio-group__message pds-radio-group__message--error", id: messageId(this._groupId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: 'acc00b6e36ead10cc5cc01033ad0f619bd75f5da', icon: danger, size: "small" }), this.errorMessage))));
+            } }, h("slot", { key: '605e640fada693696e0b71205d18904b0af887b0', onSlotchange: () => this.updateChildRadios() })), this.helperMessage && (h("div", { key: '13cc1c7a6b70ce6826f91a68380bc46188b218e1', class: "pds-radio-group__message", id: messageId(this._groupId, 'helper') }, this.helperMessage)), this.errorMessage && (h("div", { key: '693dd2f784eb5de04f1b885948e7064936cffa7d', class: "pds-radio-group__message pds-radio-group__message--error", id: messageId(this._groupId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '1569aeeeffde77d4920627020d04983e860ea52e', icon: danger, size: "small" }), this.errorMessage))));
     }
     static get is() { return "pds-radio-group"; }
     static get encapsulation() { return "scoped"; }

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

@@ -151,7 +151,7 @@ select:has(~ .pds-select__message .pds-select__error-message):focus-visible {
   height: var(--pds-select-min-height);
   pointer-events: none;
   position: relative;
-  z-index: var(--pine-z-index-raised);
+  z-index: calc(var(--pine-z-index-raised) - 1);
 }
 
 .visually-hidden {

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

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-import { isSpecTest, messageId, exposeTypeProperty } from "../../utils/form";
+import { assignDescription, isSpecTest, messageId, exposeTypeProperty } from "../../utils/form";
 import { danger, enlarge } from "@pine-ds/icons/icons";
 /**
  * @slot action - Content to be displayed in the label area, typically for help icons or links
@@ -140,6 +140,11 @@ export class PdsSelect {
             return null;
         return (h("div", { class: "pds-select__message" }, this.getHelperMessage(), this.getErrorMessage()));
     }
+    // The field also renders as invalid whenever an error message is present, via
+    // `select:has(~ .pds-select__message .pds-select__error-message)` in the styles.
+    isInvalid() {
+        return Boolean(this.invalid) || Boolean(this.errorMessage);
+    }
     classNames() {
         const classNames = [];
         if (this.invalid) {
@@ -223,7 +228,7 @@ export class PdsSelect {
     }
     render() {
         const hasAction = this.el.querySelector('[slot="action"]') !== null;
-        return (h(Host, { key: '71f6bfba3361eaac3459c1b30b23183503b57ae5', "aria-disabled": this.disabled ? 'true' : null, class: this.classNames(), "has-action": hasAction && !this.hideLabel ? 'true' : null }, h("div", { key: 'cbd0059fc405179a59c29f81510d2948e358531c', class: "pds-select" }, !this.hideLabel && (h("div", { key: '87d42d145ec0a46a474bb599e46226efc72d1acb', class: "pds-select__label-wrapper" }, h("label", { key: '23e4b10a8b99023d1779de0eb6c56ff31189dce1', htmlFor: this.componentId }, h("span", { key: 'b655a0850ce9ce173fbd814461df8529c9c150d9', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), hasAction && this.renderAction())), h("select", { key: 'a9f2cd048cdea6f0a44305a2760c418617d7c0eb', "aria-label": this.hideLabel ? this.label : undefined, autocomplete: this.autocomplete || undefined, class: "pds-select__field", disabled: this.disabled, id: this.componentId, multiple: this.multiple, name: this.name, onBlur: this.onBlur, onChange: this.onSelectUpdate, onFocus: this.onFocus, onKeyDown: this.onKeyDown, part: "select", required: this.required, ref: (el) => (this.selectEl = el) }), h("div", { key: 'cca5b1b634d1d77bc4164cb196fdd1c4ffcb888e', "aria-hidden": "true", class: "hidden", ref: (el) => (this.slotContainer = el) }, h("slot", { key: '018780883212786a89c5e6f776dc8c69853bf732', onSlotchange: this.handleSlotChange })), this.renderMessages(), !this.multiple && h("pds-icon", { key: '10e82ad220b4e9d8d9c0710a14335d5603bd6164', "aria-hidden": "true", class: "pds-select__select-icon", icon: enlarge }))));
+        return (h(Host, { key: 'c74f5e86a09bd3fe6e8048ca103ec9aa66a98fc6', "aria-disabled": this.disabled ? 'true' : null, class: this.classNames(), "has-action": hasAction && !this.hideLabel ? 'true' : null }, h("div", { key: '76de23d6b0d9e32fab48e09a8f6ee3211e196115', class: "pds-select" }, !this.hideLabel && (h("div", { key: '1db87074447cbc819e6b06dd89135d018656a471', class: "pds-select__label-wrapper" }, h("label", { key: 'bc28c3b3361a19ee14a1b79edda736340009d87d', htmlFor: this.componentId }, h("span", { key: 'f0828e0e83c7c0d7cf50e08df4b861dad4df9eb9', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), hasAction && this.renderAction())), h("select", { key: 'd7d254887c976a95ad1f1da2ea540d6d3f986630', "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-label": this.hideLabel ? this.label : undefined, autocomplete: this.autocomplete || undefined, class: "pds-select__field", disabled: this.disabled, id: this.componentId, multiple: this.multiple, name: this.name, onBlur: this.onBlur, onChange: this.onSelectUpdate, onFocus: this.onFocus, onKeyDown: this.onKeyDown, part: "select", required: this.required, ref: (el) => (this.selectEl = el) }), h("div", { key: '793a84d41bd5e18d64757238704a053b1135a83c', "aria-hidden": "true", class: "hidden", ref: (el) => (this.slotContainer = el) }, h("slot", { key: '27ed9ff31bbf83fcbd2ed8dd2b23b97422b18d25', onSlotchange: this.handleSlotChange })), this.renderMessages(), !this.multiple && h("pds-icon", { key: '43d415eab0fc8a3c02e19848a5622ea43f04256e', "aria-hidden": "true", class: "pds-select__select-icon", icon: enlarge }))));
     }
     static get is() { return "pds-select"; }
     static get encapsulation() { return "shadow"; }

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

@@ -16,6 +16,19 @@ export class PdsSortableItem {
          */
         this.showHandle = false;
     }
+    // Discards stale handle/actions siblings left by a page-cache (Turbo, bfcache) reconnect; the fresh handle is always first, the fresh actions wrapper always last.
+    componentDidRender() {
+        const handles = Array.from(this.el.children).filter((child) => child.matches('.pds-sortable-item__handle'));
+        handles.slice(1).forEach((stale) => stale.remove());
+        const actionsWrappers = Array.from(this.el.children).filter((child) => child.matches('.pds-sortable-item__actions'));
+        const freshActions = actionsWrappers[actionsWrappers.length - 1];
+        actionsWrappers.slice(0, -1).forEach((stale) => {
+            if (freshActions !== undefined) {
+                Array.from(stale.children).forEach((node) => freshActions.appendChild(node));
+            }
+            stale.remove();
+        });
+    }
     componentWillRender() {
         // When the parent sortable has a type of 'handle', the sortable items
         // will automatically set showHandle to 'true'.
@@ -25,7 +38,7 @@ export class PdsSortableItem {
         }
     }
     render() {
-        return (h(Host, { key: '631a0c1150226256cdb47d1a7bc6635144bb56d0', class: "pds-sortable-item", id: this.componentId }, this.showHandle && (h("div", { key: 'bdb6ff779a5d750b75d404521bc91cad02176ea8', class: "pds-sortable-item__handle" }, h("pds-icon", { key: '8a2d151607015d853b240517c0a1930e8c5efabb', "aria-hidden": "true", icon: handleIcon }))), h("slot", { key: '2749b15b7ec10bcd2e99677a59772107295a20e2' }), this.enableActions && (h("div", { key: '9019a0736eec7f62c5a1d25d92071fddd79a5c37', class: "pds-sortable-item__actions" }, h("slot", { key: '6645aca60484b591231f91e4a846dbe29ccca7a7', name: "sortable-item-actions" })))));
+        return (h(Host, { key: '5533907ee217d31754ac19bf712bdb903e3b1614', class: "pds-sortable-item", id: this.componentId }, this.showHandle && (h("div", { key: '37642112619986b21c16c243e8d140ae82c869da', class: "pds-sortable-item__handle" }, h("pds-icon", { key: '71ec5188d7443c39ab00ba8b24ffbfbdfb3bd5b4', "aria-hidden": "true", icon: handleIcon }))), h("slot", { key: '4c5f80514336f40086a3b92d8c3d5ebb04115f4a' }), this.enableActions && (h("div", { key: 'ca821be132fb88e0faa207817bb27db488475d96', class: "pds-sortable-item__actions" }, h("slot", { key: '50fc7b02c86246cd60710996399c53b9f1f669c4', name: "sortable-item-actions" })))));
     }
     static get is() { return "pds-sortable-item"; }
     static get encapsulation() { return "scoped"; }

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

@@ -82,9 +82,9 @@ export class PdsSwitch {
         this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
     }
     render() {
-        return (h(Host, { key: '96ee8c40c04e95b461ba2942b740503897a56b27', class: this.switchClassNames(), "aria-disabled": this.disabled ? 'true' : null }, h("label", { key: '441d6854f2c0b02ecf3d874198b3e0636d68c83b', htmlFor: this.componentId }, h("input", Object.assign({ key: 'a26cd5fb407abc20da3e9dcfe0e52333690b783a', "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: '5762c48f481c5c5d7b62e8dab40579a4e7ff290b', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), this.helperMessage &&
-            h("div", { key: '64c14b8833b45b4e9efb2f76faa47f0d24127c91', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            h("div", { key: 'cecd2e8da713e74b8e6b528b50733015f5d5069b', class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '3a1c8f87b3909cdad1bc680931f5521ecb77acd6', icon: danger, size: "small" }), this.errorMessage)));
+        return (h(Host, { key: '96ee8c40c04e95b461ba2942b740503897a56b27', class: this.switchClassNames(), "aria-disabled": this.disabled ? 'true' : null }, h("label", { key: '441d6854f2c0b02ecf3d874198b3e0636d68c83b', htmlFor: this.componentId }, h("input", Object.assign({ key: 'ed0c344ab46d83faf902571fcd282a605f5cfbec', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "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: 'a2e89156f56d6c921be9b866823bb4b36710b40f', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), this.helperMessage &&
+            h("div", { key: '1465778f0a69d4c87108a80603d123bf0500911d', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            h("div", { key: '2a652c3019f45a060283f98ea97ac83e17d7de33', class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '438895d9ad8799b540ab239ac90bedcb0231d2f0', icon: danger, size: "small" }), this.errorMessage)));
     }
     static get is() { return "pds-switch"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,5 @@
 import { Fragment, Host, h } from "@stencil/core";
+import { unwrapReconnectedContent } from "../../../utils/reconnected-content";
 export class PdsTab {
     constructor() {
         /**
@@ -19,6 +20,10 @@ export class PdsTab {
         /** @internal */
         this.selected = false;
     }
+    // Unwraps a nested <a>/<button> left by a page-cache (Turbo, bfcache) reconnect.
+    componentDidRender() {
+        unwrapReconnectedContent(this.el.querySelector('.pds-tab__content'), 'a.pds-tab, button.pds-tab', '.pds-tab__content');
+    }
     onTabClick(index, parentComponentId) {
         if (this.disabled)
             return;

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

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+import { unwrapReconnectedContent } from "../../../utils/reconnected-content";
 export class PdsTabpanel {
     constructor() {
         /**
@@ -12,8 +13,12 @@ export class PdsTabpanel {
         /** @internal */
         this.stretch = false;
     }
+    // Unwraps a nested .pds-tabpanel left by a page-cache (Turbo, bfcache) reconnect.
+    componentDidRender() {
+        unwrapReconnectedContent(this.el.querySelector('.pds-tabpanel'), '.pds-tabpanel');
+    }
     render() {
-        return (h(Host, { key: '88dfc12ce8b2413824e6d3425aa38674fa14c764', slot: "tabpanels", class: this.stretch && this.selected ? "pds-tabpanel--stretch-active" : undefined }, h("div", { key: 'bcfe8be6480dc253b10d63d6e37caacec4a8fe7f', 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: '96ee87a0917e5f538a5c053045a5d6821684cf3a' }))));
+        return (h(Host, { key: '342748daeeba7a5e0d2daef6eb0d1c787cdb47ea', slot: "tabpanels", class: this.stretch && this.selected ? "pds-tabpanel--stretch-active" : undefined }, h("div", { key: '72826548113720f89b9adcf017c1ca02a9f7a02a', 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: 'f12d5bacd3ce3509c84720cdbd4441c82b1f8ced' }))));
     }
     static get is() { return "pds-tabpanel"; }
     static get originalStyleUrls() {

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

@@ -302,9 +302,9 @@ export class PdsTextarea {
     render() {
         const value = this.getValue();
         return (h(Host, { key: 'd13869d989752c76c80a46ebb0291df2c0546cc2', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null }, h("div", { key: '19454f642896485dc22bc5dac8b6ed3b4ae5627a', class: "pds-textarea" }, this.label &&
-            h("div", { key: 'def9e117ba3667a542e8cec32c2eabfa701c3305', class: "pds-textarea__label-wrapper" }, h("label", { key: '893a1db325ece460c627e72b765289098823e49e', htmlFor: this.componentId }, h("span", { key: 'd047f17441aa81800057d7403af15f6e38c53f6c', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), !this.hideLabel && this.renderAction()), h("div", { key: '7d0f2fab56fee9b9d9e0facabc7e607cb6bee23b', class: "pds-textarea__field-wrapper" }, h("textarea", Object.assign({ key: 'a3ecb78c5b8f42f8350abe623bacb55be6c4a0c0', 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, onKeyDown: this.onKeyDown }, this.inheritedAttributes), value), this.renderCharacterCounter()), this.helperMessage &&
-            h("p", { key: 'b5229a6ef0b2c4ee5dcb820ce2b9bbf6334adef8', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
-            h("p", { key: '8e6dfa97496d553b8e1e2a50c1221fad3ddb539a', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: 'f3ed2677239e6d135480cf55d1d908936d746322', icon: danger, size: "small" }), this.errorMessage))));
+            h("div", { key: 'def9e117ba3667a542e8cec32c2eabfa701c3305', class: "pds-textarea__label-wrapper" }, h("label", { key: '893a1db325ece460c627e72b765289098823e49e', htmlFor: this.componentId }, h("span", { key: 'd047f17441aa81800057d7403af15f6e38c53f6c', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), !this.hideLabel && this.renderAction()), h("div", { key: '7d0f2fab56fee9b9d9e0facabc7e607cb6bee23b', class: "pds-textarea__field-wrapper" }, h("textarea", Object.assign({ key: '261e6031c61832acde2d595248ccdc8bd5c84768', ref: (el) => this.nativeTextarea = el, "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "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, onKeyDown: this.onKeyDown }, this.inheritedAttributes), value), this.renderCharacterCounter()), this.helperMessage &&
+            h("p", { key: 'de40f9d13bda3d9a224349b7f4ca38194e7adbb5', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
+            h("p", { key: '1306917ce521c3ad0d303d255f9e7aefd0e65de7', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: '1c9e22b9b4bf84f671797bbfb9080bdbdb7619a7', icon: danger, size: "small" }), this.errorMessage))));
     }
     static get is() { return "pds-textarea"; }
     static get encapsulation() { return "shadow"; }

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

@@ -44,6 +44,10 @@ export class PdsTooltip {
          * @defaultValue false
          */
         this.opened = false;
+        // connectedCallback fires on every reconnect (unlike componentWillLoad/componentDidLoad,
+        // which are one-time), so resetting this here re-arms exactly one reconnect-cleanup pass
+        // per connect instead of re-scanning on every render for the component's whole lifetime.
+        this.hasCheckedReconnect = false;
         this.handleHide = () => {
             if (this.opened && !this._isInteractiveOpen) {
                 return;
@@ -104,6 +108,9 @@ export class PdsTooltip {
         }
         // no return; Stencil ignores teardown functions here
     }
+    connectedCallback() {
+        this.hasCheckedReconnect = false;
+    }
     disconnectedCallback() {
         window.removeEventListener('pageshow', this.handlePageShow);
         if (this.slotMutationObserver !== null) {
@@ -124,7 +131,30 @@ export class PdsTooltip {
             this.stopAutoUpdate = null;
         }
     }
+    // Unwraps stale nested trigger/content-slot-wrapper siblings left by a page-cache (Turbo, bfcache) reconnect, rerouting content-slot content back to the real content wrapper. Drains both wrappers (not just trigger) so content rerouted into contentWrapper is itself re-checked for further nesting.
+    unwrapReconnectedSlots() {
+        // Direct children only — querySelector would find a stale nested wrapper first.
+        const trigger = Array.from(this.el.children).find((child) => child.matches('.pds-tooltip__trigger'));
+        const contentWrapper = Array.from(this.el.children).find((child) => child.matches('.pds-tooltip__content-slot-wrapper'));
+        if (trigger === undefined || contentWrapper === undefined)
+            return;
+        const staleSelector = '.pds-tooltip__trigger, .pds-tooltip__content-slot-wrapper';
+        const findStaleIn = (root) => Array.from(root.children).find((child) => child.matches(staleSelector));
+        [trigger, contentWrapper].forEach((root) => {
+            let stale = findStaleIn(root);
+            while (stale !== undefined) {
+                const destination = stale.matches('.pds-tooltip__content-slot-wrapper') ? contentWrapper : trigger;
+                Array.from(stale.childNodes).forEach((node) => destination === root ? root.insertBefore(node, stale) : destination.appendChild(node));
+                stale.remove();
+                stale = findStaleIn(root);
+            }
+        });
+    }
     componentDidRender() {
+        if (!this.hasCheckedReconnect) {
+            this.unwrapReconnectedSlots();
+            this.hasCheckedReconnect = true;
+        }
         if (this.opened && this.portalEl === null) {
             this.createPortal();
         }
@@ -312,9 +342,9 @@ export class PdsTooltip {
     }
     render() {
         const hostId = this.componentId || undefined;
-        return (h(Host, { key: '6af9c969e0dae4f3969cba2153797a1bccfc6d21', id: hostId, class: { 'pds-tooltip--is-open': this.opened } }, h("span", { key: '97c48a8b8d626ee913412bd55aefb17f36fad401', class: "pds-tooltip__trigger", onMouseEnter: this.handleShow, onMouseLeave: this.handleHide,
+        return (h(Host, { key: '10913091177f60b7de464e302067998e1a847304', id: hostId, class: { 'pds-tooltip--is-open': this.opened } }, h("span", { key: 'f61689273c965a8374e44907003f1ec83b8f28d4', 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: '37715fc0bf525695a62af1944ff853228080302a' })), h("div", { key: 'a9a925b1de9ea45d2f6b9f39ec5e386537313217', class: "pds-tooltip__content-slot-wrapper", hidden: true }, h("slot", { key: '1486b30af21dc69758d7dc9890cbaf227bafffc7', name: "content" }))));
+            onFocusin: this.handleShow, onFocusout: this.handleHide, ref: el => this.triggerEl = el }, h("slot", { key: '7dbbcff01c291b1ec431c80fce898c1ac3b30a86' })), h("div", { key: 'f87df4b6ead21e9f96271c5717ed93b2d9992f65', class: "pds-tooltip__content-slot-wrapper", hidden: true }, h("slot", { key: 'def9f799ef340e59fbf34a0fb3c0271f0fcfd2ca', name: "content" }))));
     }
     static get is() { return "pds-tooltip"; }
     static get originalStyleUrls() {

package/dist/collection/utils/form.js

@@ -6,14 +6,18 @@ export const messageId = (id, messageType) => {
 };
 /**
  * Assign aria-description id to relate messages with form element
+ *
+ * Returns the error message id when invalid, otherwise the helper message id.
+ * Pass only messages the component renders — a described id must exist in the DOM.
  */
-export const assignDescription = (id, invalid, helperMessage) => {
-    if (!helperMessage)
-        return;
-    let relatedId = messageId(id, 'helper');
-    if (invalid)
-        relatedId = messageId(id, 'error');
-    return relatedId;
+export const assignDescription = (id, invalid, helperMessage, errorMessage) => {
+    const hasErrorMessage = Boolean(errorMessage);
+    const hasHelperMessage = Boolean(helperMessage);
+    if (invalid && hasErrorMessage)
+        return messageId(id, 'error');
+    if (hasHelperMessage)
+        return messageId(id, 'helper');
+    return undefined;
 };
 /**
  * Updates the `invalid` prop of a form element based on it's values validity

package/dist/collection/utils/reconnected-content.js

@@ -0,0 +1,25 @@
+/**
+ * Unwraps a stale copy of a light-DOM (`shadow: false`) component's own wrapper,
+ * left behind when a page-cache (Turbo, browser bfcache) reconnect nests a
+ * component's previous render inside its freshly rendered one. Call from
+ * `componentDidRender` with the element that directly contains the rendered
+ * `<slot>` and the selector that identifies "another one of me." Unwraps in
+ * place (move-then-remove) so nested content is never lost.
+ *
+ * `contentSelector` is only needed when the wrapper itself further nests a
+ * separate content element (e.g. pds-tab's `<a class="pds-tab">` wrapping a
+ * `.pds-tab__content` div) — omit it when the wrapper's own children are the
+ * slotted content (e.g. pds-tabpanel's `.pds-tabpanel` div).
+ */
+export function unwrapReconnectedContent(container, selector, contentSelector) {
+    var _a;
+    if (container === null)
+        return;
+    let stale = container.firstElementChild;
+    while (stale === null || stale === void 0 ? void 0 : stale.matches(selector)) {
+        const source = contentSelector !== undefined ? ((_a = stale.querySelector(contentSelector)) !== null && _a !== void 0 ? _a : stale) : stale;
+        Array.from(source.childNodes).forEach((node) => container.insertBefore(node, stale));
+        stale.remove();
+        stale = container.firstElementChild;
+    }
+}

package/dist/collection/utils/test/reconnect-safety.js

@@ -0,0 +1,31 @@
+import { newSpecPage } from "@stencil/core/testing";
+/**
+ * Generic guard against the page-cache (Turbo, browser bfcache) reconnect bug class:
+ * a light-DOM (`shadow: false` or `scoped: true`) component that wraps its slotted
+ * content in a rendered element is reconnected over its own prior render, nesting
+ * (or duplicating, or losing) content.
+ *
+ * Hydrates `html`, re-parses the resulting markup the way a cache restore reconnects
+ * a component over its own output, and asserts no duplicate `id`s and no content
+ * loss or duplication survive the second pass.
+ */
+export async function expectReconnectSafe(components, html) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const first = await newSpecPage({ components: components, html });
+    const hydrated = (_b = (_a = first.root) === null || _a === void 0 ? void 0 : _a.outerHTML) !== null && _b !== void 0 ? _b : '';
+    const originalText = normalizeText((_d = (_c = first.root) === null || _c === void 0 ? void 0 : _c.textContent) !== null && _d !== void 0 ? _d : '');
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const second = await newSpecPage({ components: components, html: hydrated });
+    const reconnectedText = normalizeText((_f = (_e = second.root) === null || _e === void 0 ? void 0 : _e.textContent) !== null && _f !== void 0 ? _f : '');
+    expect(reconnectedText).toBe(originalText);
+    const ids = Array.from((_h = (_g = second.root) === null || _g === void 0 ? void 0 : _g.querySelectorAll('[id]')) !== null && _h !== void 0 ? _h : []).map((el) => el.id);
+    const duplicateIds = ids.filter((id, index) => ids.indexOf(id) !== index);
+    expect(duplicateIds).toEqual([]);
+}
+// Strips whitespace entirely rather than collapsing it: an outerHTML round-trip through
+// re-parsing can introduce or lose insignificant whitespace between elements, which isn't
+// the content-loss/duplication bug this guard is checking for.
+function normalizeText(text) {
+    return text.replace(/\s+/g, '');
+}

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-08-13T20:44:44",
+  "timestamp": "2026-09-21T21:04:29",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.43.5",
@@ -705,6 +705,10 @@
         {
           "name": "part",
           "text": "image - The main image element that represents the avatar component."
+        },
+        {
+          "name": "part",
+          "text": "initials - The text element that renders the avatar's initials, for restyling their color."
         }
       ],
       "usage": {},
@@ -1083,6 +1087,10 @@
           "name": "image",
           "docs": "The main image element that represents the avatar component."
         },
+        {
+          "name": "initials",
+          "docs": "The text element that renders the avatar's initials, for restyling their color."
+        },
         {
           "name": "status",
           "docs": ""
@@ -13703,6 +13711,29 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "errorMessage",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "error-message",
+          "reflectToAttr": false,
+          "docs": "Error message to display.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "fetchTimeout",
           "type": "number",
@@ -13761,6 +13792,29 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "helperMessage",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "helper-message",
+          "reflectToAttr": false,
+          "docs": "Helper message to display below the combobox.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "hideLabel",
           "type": "boolean",
@@ -13790,6 +13844,29 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "invalid",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "invalid",
+          "reflectToAttr": false,
+          "docs": "If true, the combobox is in an invalid state.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "label",
           "type": "string",
@@ -14148,6 +14225,28 @@
         }
       ],
       "methods": [
+        {
+          "name": "clear",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "() => Promise<void>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<void>"
+          },
+          "signature": "clear() => Promise<void>",
+          "parameters": [],
+          "docs": "Clears the selected value and resets the component.",
+          "docsTags": []
+        },
         {
           "name": "getSelectedValue",
           "returns": {
@@ -17383,6 +17482,35 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "disableTopLayer",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "disable-top-layer",
+          "reflectToAttr": false,
+          "docs": "Whether the modal opens outside the browser top layer as a non-modal dialog.\nWhen `true` it opens with `dialog.show()` instead of `dialog.showModal()`, so\noverlays rendered elsewhere in the DOM (file pickers, editor menus) can display\nabove it via `z-index`. The page is not made inert and focus is not trapped in\nthis mode. Read when the modal opens; changing it while the modal is open is\nnot supported.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "open",
           "type": "boolean",