@pine-ds/core 4.4.4 → 4.6.0

package/dist/collection/components/pds-dropdown-menu/pds-dropdown-menu.js

@@ -1,7 +1,9 @@
 import { Host, h } from "@stencil/core";
 import { setAttributesIfChanged } from "../../utils/attributes";
+import { limitRestores } from "../../utils/keep-hydrated";
 import { computePosition, flip, offset, shift, autoUpdate, } from "@floating-ui/dom";
 /**
+ * @slot header - Non-interactive content displayed above the menu items inside the dropdown panel. It renders outside the menu role, so assistive tech reads it as plain content rather than as a menu item.
  * @part menu-panel - Exposes the dropdown menu container for styling.
  */
 export class PdsDropdownMenu {
@@ -11,6 +13,7 @@ export class PdsDropdownMenu {
         this.cleanupAutoUpdate = null;
         this.triggerObserver = null;
         this.currentFocusIndex = -1;
+        this.hasHeader = false;
         /**
          * The placement of the dropdown panel relative to the trigger.
          */
@@ -29,8 +32,11 @@ export class PdsDropdownMenu {
         // Writes the trigger's ARIA from the menu's state, so the observer's own callback doesn't loop.
         this.syncTriggerAria = () => {
             if (!this.triggerEl)
-                return;
-            setAttributesIfChanged(this.triggerEl, { 'aria-haspopup': 'menu', 'aria-expanded': String(this.isOpen) });
+                return false;
+            return setAttributesIfChanged(this.triggerEl, { 'aria-haspopup': 'menu', 'aria-expanded': String(this.isOpen) });
+        };
+        this.handleHeaderSlotChange = (event) => {
+            this.hasHeader = event.target.assignedElements().length > 0;
         };
         this.handleSlotChange = (event) => {
             this.slotEl = event.target;
@@ -109,6 +115,9 @@ export class PdsDropdownMenu {
             this.toggleDropdown();
         };
     }
+    componentWillLoad() {
+        this.hasHeader = Array.from(this.host.children).some(el => el.getAttribute('slot') === 'header');
+    }
     componentDidRender() {
         var _a;
         this.panelEl = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('pds-box');
@@ -137,7 +146,8 @@ export class PdsDropdownMenu {
         this.triggerObserver = null;
         if (!this.triggerEl || typeof MutationObserver === 'undefined')
             return;
-        this.triggerObserver = new MutationObserver(this.syncTriggerAria);
+        // Capped against a script that keeps undoing it; opening and closing still write it directly.
+        this.triggerObserver = new MutationObserver(limitRestores(this.syncTriggerAria, 'pds-dropdown-menu: stopped restoring its trigger ARIA, as another script keeps changing it. It may be wrong until the menu opens or closes.', this.triggerEl));
         this.triggerObserver.observe(this.triggerEl, {
             attributes: true,
             attributeFilter: ['aria-haspopup', 'aria-expanded'],
@@ -343,7 +353,7 @@ export class PdsDropdownMenu {
         }
     }
     render() {
-        return (h(Host, { key: '9d67972cf15c22bc666c32b86dcd8f143160ee0a', id: this.componentId }, h("slot", { key: 'e9cbc0612ce0e8c2bf55e1dc7930eda075fcc173', name: "trigger", onSlotchange: this.handleTriggerSlotChange }), h("pds-box", { key: '6fed3f11cf962a97f8ebb3cc69bd76efb425c464', "border-radius": "sm", display: "flex", direction: "column", class: "pds-dropdown-menu--panel is-hidden", shadow: "100", role: "menu", "aria-orientation": "vertical", part: "menu-panel" }, h("slot", { key: 'b8757512713b913f3ee56d9518897e7ed3c3b830', onSlotchange: this.handleSlotChange }))));
+        return (h(Host, { key: '0dd585168e8fa86378c4812ce54fd09108861d5b', id: this.componentId }, h("slot", { key: 'c7144f8d6aaebe37b585c6c6230102c013230a9e', name: "trigger", onSlotchange: this.handleTriggerSlotChange }), h("pds-box", { key: '82292e051337141bc9fd83b90292b188b0bb3489', "border-radius": "sm", display: "flex", direction: "column", class: "pds-dropdown-menu--panel is-hidden", shadow: "100", part: "menu-panel" }, h("div", { key: 'c0f49dca14df0ba3885865c51562c380155bf8a8', class: { 'pds-dropdown-menu__header': true, 'is-hidden': !this.hasHeader } }, h("slot", { key: 'dc80c97a8dbb79ab4563524b3dea68d144e8570c', name: "header", onSlotchange: this.handleHeaderSlotChange })), h("div", { key: '29cb56bdf28a0438296f33e0fa86c9da7b51902c', class: "pds-dropdown-menu__items", role: "menu", "aria-orientation": "vertical" }, h("slot", { key: '8f91ceeb1eedc4acc79f09032dedc69a2ba1f99a', onSlotchange: this.handleSlotChange })))));
     }
     static get is() { return "pds-dropdown-menu"; }
     static get encapsulation() { return "shadow"; }
@@ -409,7 +419,8 @@ export class PdsDropdownMenu {
     }
     static get states() {
         return {
-            "currentFocusIndex": {}
+            "currentFocusIndex": {},
+            "hasHeader": {}
         };
     }
     static get elementRef() { return "host"; }

package/dist/collection/components/pds-filters/pds-filter/pds-filter.js

@@ -485,7 +485,7 @@ export class PdsFilter {
         return null;
     }
     render() {
-        return (h(Host, { key: '4abb55453c9ab4cd49b21a23047aa5ee4ab70056', id: this.componentId }, h("button", { key: 'e6b6bd81ca3f9d23f490219cf8e81f0bdf511798', class: this.getTriggerClasses(), type: "button", popoverTarget: this.variant !== 'clear' ? `${this.componentId}-popover` : undefined, popoverTargetAction: this.variant !== 'clear' ? 'toggle' : undefined, onKeyDown: this.variant === 'clear' ? this.handleKeyDown : undefined, onClick: (event) => this.handleClick(event), part: "button", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": this.variant !== 'clear' ? 'true' : undefined, "aria-controls": this.variant !== 'clear' ? `${this.componentId}-popover` : undefined }, h("span", { key: '4cea081451f50508cef36e90d4c88cbd94933287', class: "pds-filter__button-content", part: "button-content" }, this.renderIcon(), this.text && (h("span", { key: '479f84087e7969fa555475b240f5e70ce5bcf136', class: "pds-filter__button-text", part: "button-text" }, this.text)), this.renderDropdownIcon())), this.variant !== 'clear' && (h("div", { key: '85aec3d5d7b33a0cfb3602412238830929902eb1', ref: el => this.popoverEl = el, id: `${this.componentId}-popover`, class: "pds-filter__popover", popover: "auto", part: "popover" }, h("slot", { key: 'ede4c3866bfdce974e0d21c6e6a3ae22aee47d2c' })))));
+        return (h(Host, { key: '3cae951aee1f9c75f3e207cf6c68633a23f8f6dc', id: this.componentId }, h("button", { key: 'f4c644710dc936248995be9a49cef8ad13031d61', class: this.getTriggerClasses(), type: "button", popoverTarget: this.variant !== 'clear' ? `${this.componentId}-popover` : undefined, popoverTargetAction: this.variant !== 'clear' ? 'toggle' : undefined, onKeyDown: this.variant === 'clear' ? this.handleKeyDown : undefined, onClick: (event) => this.handleClick(event), part: "button", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": this.variant !== 'clear' ? 'true' : undefined, "aria-controls": this.variant !== 'clear' ? `${this.componentId}-popover` : undefined }, h("span", { key: '2dd87e53f363118becc762051ea1be664258b8b6', class: "pds-filter__button-content", part: "button-content" }, this.renderIcon(), this.text && (h("span", { key: '733ceb5e07198e844fbdc1af294d2046c4c571d8', class: "pds-filter__button-text", part: "button-text" }, this.text)), this.renderDropdownIcon())), this.variant !== 'clear' && (h("div", { key: 'beb65a21192c6f5c16703aec7ab9a92ea378ef3c', ref: el => this.popoverEl = el, id: `${this.componentId}-popover`, class: "pds-filter__popover", popover: "auto", part: "popover" }, h("slot", { key: '5a481cc6b143b059a5fc33d377abe5ab79aefb4e' })))));
     }
     static get is() { return "pds-filter"; }
     static get encapsulation() { return "shadow"; }

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

@@ -4,7 +4,7 @@ import { Host, h } from "@stencil/core";
  */
 export class PdsFilters {
     render() {
-        return (h(Host, { key: '5587c41a5ca93cc48399d7c1af0762d4a3516b4d', id: this.componentId }, h("div", { key: '43ee499b9c3f49b52cf18beee8ac5cf97b8ad49a', class: "pds-filters" }, h("slot", { key: '79a452042d7aa7e0492d80fd773f71fb820c2211' }))));
+        return (h(Host, { key: '8688235fe7cdea1b4fc540156ff21bb9711b41b6', id: this.componentId }, h("div", { key: 'e51a37977df8c31f99b28d8c7e4bedb0d63e53c6', class: "pds-filters" }, h("slot", { key: '8ce936da4d3f0213408090bc3eeb011920f9aa6c' }))));
     }
     static get is() { return "pds-filters"; }
     static get encapsulation() { return "shadow"; }

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

@@ -15,9 +15,9 @@ export class PdsImage {
         this.loading = 'eager';
     }
     render() {
-        return (h(Host, { key: 'fff1a796e59b8e666069e56390e174d7d2861f03', class: {
+        return (h(Host, { key: '1e8bb3882c2a629004ce1441e85d5c5a75a84e98', class: {
                 'pds-image': true,
-            }, id: this.componentId }, h("img", { key: 'dbeda9da5adca51c58ec5a807cde673d6b479d0f', alt: this.alt, height: this.height, loading: this.loading, sizes: this.sizes, src: this.src, srcset: this.srcset, width: this.width })));
+            }, id: this.componentId }, h("img", { key: 'b50b19d51431d45027c7a918a4ba4c38493741d5', alt: this.alt, height: this.height, loading: this.loading, sizes: this.sizes, src: this.src, srcset: this.srcset, width: this.width })));
     }
     static get is() { return "pds-image"; }
     static get encapsulation() { return "shadow"; }

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

@@ -289,10 +289,10 @@ export class PdsInput {
             'has-prepend': this.hasPrepend,
             'has-append': this.hasAppend,
         };
-        return (h(Host, { key: '8c0829cc3502e5fa1fe52584d84b9345fcb0f3fd', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-prefix": this.hasPrefix ? 'true' : null, "has-suffix": this.hasSuffix ? 'true' : null, "has-prepend": this.hasPrepend ? 'true' : null, "has-append": this.hasAppend ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null, "full-width": this.fullWidth ? 'true' : null }, h("div", { key: 'cf754e6fc72d2cf900e541a469a8e0ba62851538', class: "pds-input" }, label && (h("div", { key: 'f55793898eb2840322ec9a79daed186420ef0d90', class: {
+        return (h(Host, { key: '75eb8bc6cda5e947f8677ebefe7995688f03f947', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-prefix": this.hasPrefix ? 'true' : null, "has-suffix": this.hasSuffix ? 'true' : null, "has-prepend": this.hasPrepend ? 'true' : null, "has-append": this.hasAppend ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null, "full-width": this.fullWidth ? 'true' : null }, h("div", { key: '93d7f90b9a64daccea1533abc08a8cb18825b828', class: "pds-input" }, label && (h("div", { key: '948109b3bfa1a1b8171572da9160425e3e35a7a6', class: {
                 'pds-input__label-wrapper': true,
                 'visually-hidden': this.hideLabel,
-            } }, h("label", { key: '2a7deac2a9443b1a648133a799b69414b96314e3', htmlFor: componentId, class: "pds-input__label" }, h("span", { key: '75dc7787e0132c4f62272307867a8066f9cf6ce2' }, label, this.required && h("span", { key: 'c7c413addd2b3f275031596598b030c02f647969', class: "pds-input__required-indicator" }, " *"))), !this.hideLabel && this.renderAction())), h("div", { key: 'eaf09d07c4fbc84ef835d2c7b4f00e252394f5ed', class: inputWrapperClasses }, this.renderPrepend(), this.renderPrefix(), h("input", Object.assign({ key: 'dca2390b44e430f0ab1d29daa4ce630ac3b12881', ref: (input) => (this.nativeInput = input), class: "pds-input__field", "aria-describedby": assignDescription(componentId, invalid, helperMessage, errorMessage), "aria-invalid": invalid ? "true" : undefined, autocomplete: this.autocomplete, disabled: disabled, id: componentId, max: this.max, maxlength: this.maxlength, min: this.min, minlength: this.minlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, step: this.step, type: this.type, value: value, onInput: this.onInputEvent, onChange: this.onChangeEvent, onBlur: this.onBlurEvent, onFocus: this.onFocusEvent, onKeyDown: this.onKeyDownEvent, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd }, this.inheritedAttributes)), this.renderSuffix(), this.renderAppend()), helperMessage && (h("p", { key: '0bd7859f44185ed0c1478833518cb5829ffea4ad', class: "pds-input__helper-message", id: messageId(componentId, 'helper') }, helperMessage)), errorMessage && (h("p", { key: 'c40016f5bb03e292e01430c2940aff0ebb98abb5', class: "pds-input__error-message", id: messageId(componentId, 'error') }, h("pds-icon", { key: '54985d775ddf951b50cae4796b7847e98de7434f', "aria-hidden": "true", icon: danger, size: "small" }), errorMessage)))));
+            } }, h("label", { key: 'bb0e6c6febb97ad4aa3942ac5e67ac42dc1bde0a', htmlFor: componentId, class: "pds-input__label" }, h("span", { key: 'c6a122f829aa3b92ccb715c3f3975f6baadb3028' }, label, this.required && h("span", { key: 'dce7d1a9c010a545992734bd238e9f6a4ca7b4ce', class: "pds-input__required-indicator" }, " *"))), !this.hideLabel && this.renderAction())), h("div", { key: '1b92ab5d649a4a9cf8112ea9b8a8a1095714f6d0', class: inputWrapperClasses }, this.renderPrepend(), this.renderPrefix(), h("input", Object.assign({ key: 'bc3c4b907312149d375bb78f9912e4501da59348', ref: (input) => (this.nativeInput = input), class: "pds-input__field", "aria-describedby": assignDescription(componentId, invalid, helperMessage, errorMessage), "aria-invalid": invalid ? "true" : undefined, autocomplete: this.autocomplete, disabled: disabled, id: componentId, max: this.max, maxlength: this.maxlength, min: this.min, minlength: this.minlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, step: this.step, type: this.type, value: value, onInput: this.onInputEvent, onChange: this.onChangeEvent, onBlur: this.onBlurEvent, onFocus: this.onFocusEvent, onKeyDown: this.onKeyDownEvent, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd }, this.inheritedAttributes)), this.renderSuffix(), this.renderAppend()), helperMessage && (h("p", { key: 'f7bcbafc17a20310d602fce14a0adad522acbcb1', class: "pds-input__helper-message", id: messageId(componentId, 'helper') }, helperMessage)), errorMessage && (h("p", { key: 'bbbd6dc3203b89e5759587147de74d2ce3ce6177', class: "pds-input__error-message", id: messageId(componentId, 'error') }, h("pds-icon", { key: '68a6a92c82c1756ad99f431e0cb56756e3cdf75c', "aria-hidden": "true", icon: danger, size: "small" }), errorMessage)))));
     }
     static get is() { return "pds-input"; }
     static get encapsulation() { return "shadow"; }

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

@@ -56,8 +56,8 @@ export class PdsLink {
         const targetValue = this.target || (this.external ? '_blank' : undefined);
         const showExternalIcon = this.external;
         const relValue = targetValue === '_blank' ? 'noopener noreferrer' : undefined;
-        return (h("a", { key: '4757dc775fb132ea1fed93fed8e3cd18c77d45af', class: this.classNames(), download: this.download, href: this.href, id: this.componentId, part: "link", "aria-current": this.active ? 'page' : undefined, target: targetValue, rel: relValue, style: this.setLinkStyles(), "data-turbo": this.turbo || undefined, "data-turbo-frame": this.turboFrame || undefined, "data-turbo-action": this.turboAction || undefined, "data-turbo-method": this.turboMethod || undefined, "data-turbo-confirm": this.turboConfirm || undefined, "data-turbo-stream": this.turboStream || undefined, "data-turbo-prefetch": this.turboPrefetch || undefined, "data-turbo-preload": this.turboPreload || undefined }, h("slot", { key: '88e5a1ef3b0fc384f7449979029fa45c627aab99' }, this.href), showExternalIcon &&
-            h("pds-icon", { key: '6f1b9cf0dab342ea09c1f52c605228ef4d04f829', icon: launch, size: this.fontSize })));
+        return (h("a", { key: '3b6f9d19d7f50d0606cf5f3c3a97b85ee4aa63b0', class: this.classNames(), download: this.download, href: this.href, id: this.componentId, part: "link", "aria-current": this.active ? 'page' : undefined, target: targetValue, rel: relValue, style: this.setLinkStyles(), "data-turbo": this.turbo || undefined, "data-turbo-frame": this.turboFrame || undefined, "data-turbo-action": this.turboAction || undefined, "data-turbo-method": this.turboMethod || undefined, "data-turbo-confirm": this.turboConfirm || undefined, "data-turbo-stream": this.turboStream || undefined, "data-turbo-prefetch": this.turboPrefetch || undefined, "data-turbo-preload": this.turboPreload || undefined }, h("slot", { key: 'a265f1c4c9b6ff089b23906d8f650bfd65b25013' }, this.href), showExternalIcon &&
+            h("pds-icon", { key: '9553a8256b6811296ea4b762e32662c1a2f4aecf', icon: launch, size: this.fontSize })));
     }
     static get is() { return "pds-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -66,7 +66,7 @@ export class PdsLoader {
             'aria-live': 'polite',
         };
         this.hostKeeper.record(hostClass, {}, hostAttributes);
-        return (h(Host, Object.assign({ key: '81f97b8a6adf4d2c0e5516aa2af9054e200629e1', class: hostClass }, hostAttributes), this.variant === 'spinner' && (h("div", { key: '6e25806c83d6ddeb1141acdd083654867c6ff8a2', class: "pds-loader--spinner" }, h("svg", { key: '4798f27facfcf57da8d408319527fc6083489107', style: this.getSvgStyle(), viewBox: "0 0 200 200", fill: "none", part: "loader-svg" }, h("defs", { key: '0c64abfabc18ccd51ef41017e088f6ec10736d61' }, h("linearGradient", { key: '3aa61edf6250dc827bf925938b69008860f96596', id: "spinner-secondHalf" }, h("stop", { key: '2693d8a866492ef4ca98cbc4beb5f9f1a34a8b52', offset: "0%", "stop-opacity": "0", "stop-color": "currentColor" }), h("stop", { key: 'ae229fdc73733e4d6ab15a6663e67b574bd49b40', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" })), h("linearGradient", { key: '8ddbb46a1a387113d74a82cc4e3e0e9c7e12d573', id: "spinner-firstHalf" }, h("stop", { key: 'd166a3c1ae37c3afa898351683b07f5c4d0ee906', offset: "0%", "stop-opacity": "1", "stop-color": "currentColor" }), h("stop", { key: 'e4c9790bc9a645d752aa56c238fb8708310208b5', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" }))), h("g", { key: '8b3897ff925d4207f9060e2fb69afa657b1b8fe3', class: "pds-loader__spinner-path" }, h("path", { key: '603ef195d1fc64d2059d9fbfeb9b14e2bdb1cabe', stroke: "url(#spinner-secondHalf)", d: "M 4 100 A 96 96 0 0 1 196 100" }), h("path", { key: 'a649ac9538248f5a22d48008377e18f4407efad9', stroke: "url(#spinner-firstHalf)", d: "M 196 100 A 96 96 0 0 1 4 100" }), h("path", { key: '37f3772b61d1459959cc4d8c0b5c729dbd6953ff', stroke: "currentColor", "stroke-linecap": "round", d: "M 4 100 A 96 96 0 0 1 4 98" }))))), this.variant === 'typing' && (h("div", { key: 'e510c2e6498a5542ce6e6573fdc03e8770121cd7', class: "pds-loader--typing" }, h("span", { key: 'bbf4f5a328175f06b221d9abc73118505a09455d' }), h("span", { key: '9a7e80b28e1455ef9d0c1bdb330a6425a3037709' }), h("span", { key: 'f8aa1eb4f822a6d0e2a14a982bbe99866a97815b' }))), h("div", { key: '3492189495798a2ea861d0dcb460f1b25d43d565', class: `pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}` }, h("slot", { key: 'c1a19415b513a2a5f76a53d64b0ef5fbb4a5d100', name: "label" }, "Loading..."))));
+        return (h(Host, Object.assign({ key: 'c42c1aeec5c8db9a1065f35492734a8cb265f3ce', class: hostClass }, hostAttributes), this.variant === 'spinner' && (h("div", { key: 'dc1b7943709d03e02467cca0817fb6a7ad5ed10a', class: "pds-loader--spinner" }, h("svg", { key: 'db38e607541ac1eb91be87b2cd0240341c8fb51d', style: this.getSvgStyle(), viewBox: "0 0 200 200", fill: "none", part: "loader-svg" }, h("defs", { key: 'd734ef70b0039758a25881c22bb3e6453ac40012' }, h("linearGradient", { key: '697627f516c5f7b4cd5351dd39de231c0cb9e429', id: "spinner-secondHalf" }, h("stop", { key: '03082c0ec354685eebf7d0132202d54b083d26df', offset: "0%", "stop-opacity": "0", "stop-color": "currentColor" }), h("stop", { key: '181b661b36aeb44943e20dec513f7265a9487004', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" })), h("linearGradient", { key: '67f6c51aefe99bcbfdb741290337364501fc4fcb', id: "spinner-firstHalf" }, h("stop", { key: 'cb6adf27ecb06b42ba572a702153de960491b0b6', offset: "0%", "stop-opacity": "1", "stop-color": "currentColor" }), h("stop", { key: 'aeebabfa1ac00391937388feefa120bd0bb4d26c', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" }))), h("g", { key: 'f06ca75e4df171b6db426fce9bc34076cfee5bca', class: "pds-loader__spinner-path" }, h("path", { key: 'a278b37de8f77a1000efecb62b89e3f751712a98', stroke: "url(#spinner-secondHalf)", d: "M 4 100 A 96 96 0 0 1 196 100" }), h("path", { key: 'a035add4d01b60bcebf7625c8730d6a41ddf40ff', stroke: "url(#spinner-firstHalf)", d: "M 196 100 A 96 96 0 0 1 4 100" }), h("path", { key: '1189c8299d33a2a6bb6a8345b60f22bf4ad9beee', stroke: "currentColor", "stroke-linecap": "round", d: "M 4 100 A 96 96 0 0 1 4 98" }))))), this.variant === 'typing' && (h("div", { key: '39826fae20e8826d9c73cf57ba938583d610e1ea', class: "pds-loader--typing" }, h("span", { key: '8f2b837c79548a1080710a7cc30c3be3a051e1dd' }), h("span", { key: '8efb1193ef51f110950861767eccc3896e90b81e' }), h("span", { key: '366f2d205adbb043691c253cff17d2d29d56a2cc' }))), h("div", { key: 'aeaa4aa12863b34088e84fd2791c2ce32dc05248', class: `pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}` }, h("slot", { key: '7a8ec45aed1cd6f9e60f4db2ec5376439fa41c81', name: "label" }, "Loading..."))));
     }
     static get is() { return "pds-loader"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-modal/pds-modal-content/pds-modal-content.js

@@ -181,10 +181,10 @@ export class PdsModalContent {
     render() {
         // Only apply max-height style if it's not 'none'
         const styleObj = this.contentMaxHeight !== 'none' ? { maxHeight: this.contentMaxHeight } : {};
-        return (h(Host, { key: 'f66dbdd08d6af3f87b0a6e8f30e1948b2f674e34' }, h("div", { key: 'ac0469cbfe48002d5bc7f401e0dc30926cfd4421', class: {
+        return (h(Host, { key: 'd41d5632eb6a2dafe921546af60f835d3545cc4f' }, h("div", { key: '741ac9f28149039ecf5051142a939ab62ef26a87', class: {
                 'pds-modal-content': true,
                 [`pds-modal-content--border-${this.border}`]: true
-            }, style: styleObj, tabindex: "-1" }, h("slot", { key: '26a8a45ab4dcd0349da68304fa3cacc64603208a' }))));
+            }, style: styleObj, tabindex: "-1" }, h("slot", { key: '090a52e9425d4df61c2d8216cc19f0925babdffe' }))));
     }
     static get is() { return "pds-modal-content"; }
     static get originalStyleUrls() {

package/dist/collection/components/pds-modal/pds-modal-footer/pds-modal-footer.js

@@ -9,7 +9,7 @@ export class PdsModalFooter {
         unwrapReconnectedContent(this.el.querySelector('.pds-modal__footer'), '.pds-modal__footer');
     }
     render() {
-        return (h("footer", { key: '1148892c2d6b9a461f6c04a670fceda76c1be53a', class: "pds-modal__footer" }, h("slot", { key: 'ccd754674c82c415f8c056c9dda6327df35dbd03' })));
+        return (h("footer", { key: '030153b84f1ea1cb133c9ccec3ad86583995974f', class: "pds-modal__footer" }, h("slot", { key: '3a479e7047f3e845a65c37d60539648c8ff78602' })));
     }
     static get is() { return "pds-modal-footer"; }
     static get originalStyleUrls() {

package/dist/collection/components/pds-modal/pds-modal-header/pds-modal-header.js

@@ -9,7 +9,7 @@ export class PdsModalHeader {
         unwrapReconnectedContent(this.el.querySelector('.pds-modal__header'), '.pds-modal__header');
     }
     render() {
-        return (h("header", { key: '030153b84f1ea1cb133c9ccec3ad86583995974f', class: "pds-modal__header" }, h("slot", { key: '3a479e7047f3e845a65c37d60539648c8ff78602' })));
+        return (h("header", { key: 'ee3ac5fb9b00a943aa86c3434ea07291b74d776c', class: "pds-modal__header" }, h("slot", { key: '0b0f7ff257635723099c536648a826be8dcc05e7' })));
     }
     static get is() { return "pds-modal-header"; }
     static get originalStyleUrls() {

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

@@ -519,14 +519,14 @@ export class PdsModal {
     }
     render() {
         const [sizeClass = 'md', customSize] = this.resolveSize();
-        return (h("dialog", { key: 'b6714c7e77d80bf2370f2170ffce029abe147d81', class: {
+        return (h("dialog", { key: '12ea38928ea287f16ffa33e246caa2bfde6fc130', class: {
                 'pds-modal__backdrop': true,
                 'open': this.open
-            }, "aria-modal": this.disableTopLayer ? 'false' : 'true', "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick }, h("div", { key: '8c3319f53dd8c79c9e952785277e9e82e28b651e', class: {
+            }, "aria-modal": this.disableTopLayer ? 'false' : 'true', "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick }, h("div", { key: 'b9d83cabda56c315d9115f7030e3bdbcf923ec08', class: {
                 'pds-modal': true,
                 [`pds-modal--${sizeClass}`]: true,
                 'pds-modal--scrollable': this.scrollable
-            }, style: customSize !== undefined ? { '--pds-modal-max-width': customSize } : undefined, part: "modal" }, h("slot", { key: '8c6f9cc1a20b515659344ad041512de52761800d' }))));
+            }, style: customSize !== undefined ? { '--pds-modal-max-width': customSize } : undefined, part: "modal" }, h("slot", { key: '3c5edad1482cb124e503197adf411890573b076d' }))));
     }
     static get is() { return "pds-modal"; }
     static get originalStyleUrls() {

package/dist/collection/components/pds-modal/test/mock-pds-modal.js

@@ -77,7 +77,7 @@ export class MockPdsModal {
             'pds-modal__backdrop': true,
             'open': this.open,
         };
-        return (h("div", { key: '1211583aae06cfa7726371ba18796d7704d9e468', class: backdropClasses }, h("div", { key: '8376a213a21b8f5ee78b9e58e2265d27ce957307', class: modalClasses, role: "dialog", "aria-modal": "true", "aria-labelledby": this.componentId ? `${this.componentId}-heading` : null, part: "modal" }, h("div", { key: '4dfcad52e69fa2f207ed09c3ee3a225a1d789e71', class: "pds-modal__header" }, h("slot", { key: '8d9710b91f6f83bc20b2f93b9e4e9fa5f59ae2ce', name: "header" })), h("div", { key: 'f3291bf921619eabb6d63aa80e006f94239325fc', class: "pds-modal-content" }, h("slot", { key: '19dca53455f9943e394d8ed9ea722a1a591e5de6' })), h("div", { key: '835caa9692b1109649edc7d4daf308bb10ed0cd9', class: "pds-modal__footer" }, h("slot", { key: 'f30033b8f842923df9780b893d05428dc14452dc', name: "footer" })))));
+        return (h("div", { key: '3a526f6883d7e7df35985a145962f656621535c1', class: backdropClasses }, h("div", { key: '3af0487dc8c8831903cd7c22ffbf3e708b067ad7', class: modalClasses, role: "dialog", "aria-modal": "true", "aria-labelledby": this.componentId ? `${this.componentId}-heading` : null, part: "modal" }, h("div", { key: '94e6205042ee91dac0823901cc97b79e93a515f2', class: "pds-modal__header" }, h("slot", { key: 'ca04b575ccceabd431e3f5c57189f17f9aae6089', name: "header" })), h("div", { key: 'f8327a261e70b622add1dd4ee21b5f8e8d91e603', class: "pds-modal-content" }, h("slot", { key: 'a1a9c30d0f5479b0004ace4544e3d96ae87465be' })), h("div", { key: 'af5fa59922047eeec7cbf0a0e1ee4b472b16079c', class: "pds-modal__footer" }, h("slot", { key: '3c469bf94bb3a26dfd8046a5eda481f9d55edca1', name: "footer" })))));
     }
     static get is() { return "mock-pds-modal"; }
     static get originalStyleUrls() {

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

@@ -1229,10 +1229,10 @@ export class PdsMultiselect {
     }
     render() {
         const hasSelections = this.selectedItems.length > 0;
-        return (h(Host, { key: '295354c218d03a512ee87a9f19d2267a59731eb1', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: '8696c02fad869239fa85dcec7f92a3efb402c963', class: "pds-multiselect", onFocusout: this.handleContainerFocusOut }, this.label && (h("label", { key: '2a9cc565c5dbcf78305eb65e94d795669fb0f93b', id: `${this.componentId}-label`, htmlFor: this.componentId, class: {
+        return (h(Host, { key: '0ef6791666063e0d951d28f980b3bca89cf24287', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: 'f0ccbabfbd2dcf38f6df52f73f2152eb4bd2828e', class: "pds-multiselect", onFocusout: this.handleContainerFocusOut }, this.label && (h("label", { key: '88e01c744644ce1f75c8d5b71dfaeeb79d1ef7df', id: `${this.componentId}-label`, htmlFor: this.componentId, class: {
                 'pds-multiselect__label': true,
                 'visually-hidden': this.hideLabel,
-            } }, this.label)), h("div", { key: '9358ebffb50e74fe4ceb9ca1c13cf819cc3e96e6', class: "pds-multiselect__wrapper", ref: el => (this.containerEl = el), style: { width: this.triggerWidth } }, this.slottedTriggerEl ? (h("slot", { name: "trigger" })) : this.selectedDisplay === 'pill' && this.pillPosition === 'inline' ? (h("div", { ref: el => (this.pillInlineTriggerEl = el || undefined), part: "trigger", class: {
+            } }, this.label)), h("div", { key: '0bf4a3b1378ff18e6d6b449507ebbae1bfb279e4', class: "pds-multiselect__wrapper", ref: el => (this.containerEl = el), style: { width: this.triggerWidth } }, this.slottedTriggerEl ? (h("slot", { name: "trigger" })) : this.selectedDisplay === 'pill' && this.pillPosition === 'inline' ? (h("div", { ref: el => (this.pillInlineTriggerEl = el || undefined), part: "trigger", class: {
                 'pds-multiselect__trigger': true,
                 'pds-multiselect__trigger--open': this.isOpen,
                 'pds-multiselect__trigger--disabled': this.disabled,
@@ -1248,7 +1248,7 @@ export class PdsMultiselect {
             }, 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", { "aria-hidden": "true", class: "pds-multiselect__icon", icon: enlarge }))), this.renderDropdown()), this.selectedDisplay === 'pill' && this.pillPosition === 'below' && this.renderBelowPills(), h("span", { key: '722da251199792366dc72b6c7f016e24ae807b30', class: "visually-hidden", "aria-live": "polite", "aria-atomic": "true" }, this.removalAnnouncement), this.helperMessage && !(this.errorMessage && this.errorMessage.length > 0) && (h("p", { key: '7b4da9b2e04f53f3e8f245c119135f3b664897ec', class: "pds-multiselect__helper", id: messageId(this.componentId, 'helper') }, this.helperMessage)), this.errorMessage && (h("p", { key: '95a152f6a350eee2f67dbab2930f19e583ca3b85', class: "pds-multiselect__error", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: '7b9cded907054757a6f054d0d325811a2199e496', icon: danger, size: "small" }), this.errorMessage)), h("div", { key: '8b07974c8e2d838d76c17c3a52ba4282fb101968', style: { display: 'none' } }, h("slot", { key: '0a34d582bc4dd780072f00ac13bfdce7e297191e' })))));
+            } }, this.getTriggerText()), h("pds-icon", { "aria-hidden": "true", class: "pds-multiselect__icon", icon: enlarge }))), this.renderDropdown()), this.selectedDisplay === 'pill' && this.pillPosition === 'below' && this.renderBelowPills(), h("span", { key: '5202a263b219d06891bda739f98db0162bf33c48', class: "visually-hidden", "aria-live": "polite", "aria-atomic": "true" }, this.removalAnnouncement), this.helperMessage && !(this.errorMessage && this.errorMessage.length > 0) && (h("p", { key: '47f7b55863c5b72d41c4ef1893b9364988fc0b56', class: "pds-multiselect__helper", id: messageId(this.componentId, 'helper') }, this.helperMessage)), this.errorMessage && (h("p", { key: '3930dc30b2df7179d178873c470aa1da0f6f258c', class: "pds-multiselect__error", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: 'e31d55db3fd0173c56faa23e34e0be92371983d4', icon: danger, size: "small" }), this.errorMessage)), h("div", { key: 'b3326cc1a5e5886be05327a066e0a7ddd36ccefc', style: { display: 'none' } }, h("slot", { key: '91559cb9510abce6084348a17516460fd8545ef7' })))));
     }
     static get is() { return "pds-multiselect"; }
     static get encapsulation() { return "shadow"; }

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

@@ -2,6 +2,8 @@ import { Host, h } from "@stencil/core";
 import { containsComposed } from "../../utils/closest";
 import { restoreReflectedDefault } from "../../utils/reflected-attribute-default";
 import { setAttributesIfChanged } from "../../utils/attributes";
+import { cssEscape } from "../../utils/css";
+import { limitRestores } from "../../utils/keep-hydrated";
 /**
  * @slot trigger - The trigger element for the popover
  * @slot (default) - The content to display inside the popover
@@ -166,7 +168,8 @@ export class PdsPopover {
         this.triggerObserver = null;
         if (this.triggerEl == null || typeof MutationObserver === 'undefined')
             return;
-        this.triggerObserver = new MutationObserver(() => this.linkTriggerToPortal());
+        // Capped against a script that keeps undoing it; opening and closing still write it directly.
+        this.triggerObserver = new MutationObserver(limitRestores(() => this.linkTriggerToPortal(), 'pds-popover: stopped restoring its trigger ARIA, as another script keeps changing it. It may be wrong until the popover opens or closes.', this.triggerEl));
         this.triggerObserver.observe(this.triggerEl, {
             attributes: true,
             attributeFilter: ['aria-expanded', 'aria-controls'],
@@ -176,9 +179,9 @@ export class PdsPopover {
     // This mirrors the native Popover API's accessibility behavior
     linkTriggerToPortal() {
         if (this.triggerEl == null || this.portalEl == null)
-            return;
+            return false;
         // Skips values already in place, so the trigger observer's own callback doesn't loop.
-        setAttributesIfChanged(this.triggerEl, { 'aria-expanded': String(this.active), 'aria-controls': this.portalEl.id });
+        return setAttributesIfChanged(this.triggerEl, { 'aria-expanded': String(this.active), 'aria-controls': this.portalEl.id });
     }
     // componentDidLoad doesn't run again when a popover comes back, so rebuild whatever
     // disconnectedCallback tore down. Each step is a no-op when nothing was.
@@ -285,22 +288,25 @@ export class PdsPopover {
         if (!this.portalEl)
             return;
         const portalId = this.portalEl.id;
+        // componentId comes from the consumer, so it can carry characters cssEscape needs to
+        // neutralize before the id is used as a selector or interpolated into stylesheet text.
+        const escapedPortalId = cssEscape(portalId);
         // Check if style element already exists
-        const existingStyle = document.querySelector(`style[data-pds-popover-focus="${portalId}"]`);
+        const existingStyle = document.querySelector(`style[data-pds-popover-focus="${escapedPortalId}"]`);
         if (existingStyle)
             return;
         // Create style element with Pine's focus ring styles and dark mode border
         const styleEl = document.createElement('style');
         styleEl.setAttribute('data-pds-popover-focus', portalId);
         styleEl.textContent = `
-      #${portalId}:focus {
+      #${escapedPortalId}:focus {
         outline: var(--pine-outline-focus, 2px solid var(--pine-color-focus-ring, #6366f1)) !important;
         outline-offset: var(--pine-border-width, 1px);
       }
-      #${portalId}:focus:not(:focus-visible) {
+      #${escapedPortalId}:focus:not(:focus-visible) {
         outline: none;
       }
-      [data-theme="dark"] #${portalId} {
+      [data-theme="dark"] #${escapedPortalId} {
         border: var(--pine-border);
       }
     `;
@@ -359,7 +365,7 @@ export class PdsPopover {
             }
             // Remove the associated focus style element
             const portalId = this.portalEl.id;
-            const styleEl = document.querySelector(`style[data-pds-popover-focus="${portalId}"]`);
+            const styleEl = document.querySelector(`style[data-pds-popover-focus="${cssEscape(portalId)}"]`);
             if (styleEl && styleEl.parentNode) {
                 styleEl.parentNode.removeChild(styleEl);
             }
@@ -635,7 +641,7 @@ export class PdsPopover {
         }, 16); // ~1 frame at 60fps
     }
     render() {
-        return (h(Host, { key: '66347d4922274d25504e5be134b36f05a3f12fdc', id: this.componentId }, h("span", { key: '8f29d54d58cf0c66f86470c77c676716f1ab056f', class: "pds-popover__trigger-wrapper" }, h("slot", { key: '5c89b687cfc01e67d3c11835e77755de88f03584', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), h("div", { key: '0ca9aff3021720098d86ec29eb69cbf149ef79a9', class: "pds-popover__content-slot-wrapper" }, h("slot", { key: 'b73c3324d3322c41c68161e9ada51499c0e49cb0', onSlotchange: this.handleContentSlotChange }))));
+        return (h(Host, { key: 'd804db8c73e0dc2acf0d1bbca20edb77993ff7fd', id: this.componentId }, h("span", { key: '5408d1856c9b13b327ea13b43cffc23af925a82f', class: "pds-popover__trigger-wrapper" }, h("slot", { key: '9d0ff01292c67bdaa88d49114162c3c65ff8a20d', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), h("div", { key: 'cdd38016453ea1838d5718fb8e190cd4304ac8cc', class: "pds-popover__content-slot-wrapper" }, h("slot", { key: '9faf60d7be7a2ff3c5fe6c3e4de374bafadf848a', onSlotchange: this.handleContentSlotChange }))));
     }
     static get is() { return "pds-popover"; }
     static get encapsulation() { return "shadow"; }

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

@@ -30,7 +30,7 @@ export class PdsProgress {
         const normalizedFillColor = normalizeColorValue(this.fillColor);
         const hostClass = this.animated ? { 'is-animated': this.animated } : '';
         this.hostKeeper.record(hostClass);
-        return (h(Host, { key: '5573a5c48eee2f7968835db92afdaebb73c1b85e', class: hostClass }, h("div", { key: 'bb5cf260495be798f4272673884336022c28441e', class: "pds-progress" }, h("label", { key: '017efa649ada73ec724b930e06bbf1ab19a18f61', class: "pds-progress__label", htmlFor: this.componentId }, this.label), h("progress", { key: 'e648d910b072b7b2ca1c4a92c0832bf6e2ef5406', id: this.componentId, max: "100", style: normalizedFillColor ? { '--color-progress-fill': normalizedFillColor } : {}, value: this.percent })), this.showPercent && h("div", { key: '1f9f1733ff2cd6e2ec81e9a46759ff451cf158f7', class: "pds-progress__percentage" }, this.percent, "%")));
+        return (h(Host, { key: 'a224e1e9bc50433553ab8bf4b0d772f01148ee76', class: hostClass }, h("div", { key: '261742044f3d68c204cbf640cc4447eb6d74df11', class: "pds-progress" }, h("label", { key: 'd686bdc6ab450bf8c14dd56077525a3139593f46', class: "pds-progress__label", htmlFor: this.componentId }, this.label), h("progress", { key: 'c716e977a952a628aec600fa680aa9c3b8d0e996', id: this.componentId, max: "100", style: normalizedFillColor ? { '--color-progress-fill': normalizedFillColor } : {}, value: this.percent })), this.showPercent && h("div", { key: '44176a580b435f69993be4a60ee2e888b87e10fb', class: "pds-progress__percentage" }, this.percent, "%")));
     }
     static get is() { return "pds-progress"; }
     static get encapsulation() { return "shadow"; }

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

@@ -10,7 +10,7 @@ export class PdsProperty {
         this.icon = 'star';
     }
     render() {
-        return (h(Host, { key: '0f6195faaaf3adb11ad14f09a36c78f94e2bdf65', id: this.componentId }, h("pds-box", { key: '0a9670c0e38065f5fbe035b81703e21155396ff8', "align-items": "center", gap: "xs" }, h("pds-icon", { key: '13b497e8670bc5210a752b8c24b9fd6397b1a8c9', icon: this.icon, size: "var(--pine-dimension-sm)", "aria-hidden": "true" }), h("slot", { key: 'a9b3cf5fd830b7551f68866a62341670f8b61b34' }))));
+        return (h(Host, { key: 'd599b62be4bacf1d89afcc26b14fc93bdc9bb3a4', id: this.componentId }, h("pds-box", { key: 'd7f80f6598615c761d672893c8acab09bd9ea33f', "align-items": "center", gap: "xs" }, h("pds-icon", { key: '15a6a6545c2cd2332bd830451106b7b08adc39ff', icon: this.icon, size: "var(--pine-dimension-sm)", "aria-hidden": "true" }), h("slot", { key: '4e5661563b99ec56189447faabcdd1ae631159b2' }))));
     }
     static get is() { return "pds-property"; }
     static get encapsulation() { return "shadow"; }

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

@@ -99,13 +99,13 @@ export class PdsRadio {
     }
     render() {
         const renderLabelAndMessages = () => [
-            h("label", { htmlFor: this.componentId, key: `${this.componentId}-label` }, h("input", { key: 'add893cd82f79b9398589bd5c0a72d5ae4a90475', "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: 'b58eed8681d1932397d38ffe82515987e6486e08', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)),
+            h("label", { htmlFor: this.componentId, key: `${this.componentId}-label` }, h("input", { key: 'ccd618855831bcee309e815f2cd2712fd4e8fe1f', "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: '2e372a880c28f48fb804bac2518208082c141fad', 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: '7374924219e59eab46a7ced9e7062c3e674b4451', 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: '889d502575f6a162f450b6b58d76a6f6f1c74e4b', icon: danger, size: "small" }), this.errorMessage))
         ];
         const hostClass = this.classNames();
         this.hostKeeper.record(hostClass);
-        return (h(Host, { key: '24269923f168d1d39ebfc1994619736f0dc8087a', class: hostClass }, this.hasImage() && (h("div", { key: '74a72bef89aa012047cbf3a1744fcd33f13bb464', class: "pds-radio__image-container", part: "image-container" }, h("slot", { key: '99dbcfdac86cb7c012fd44eab607217e21304bab', name: "image", onSlotchange: () => (this._hasImage = this.hasImageSlot()) }))), this.hasImage() ? (h("div", { class: "pds-radio__content-wrapper" }, renderLabelAndMessages())) : (renderLabelAndMessages())));
+        return (h(Host, { key: '374003032b28407581a55f1fb0a304c49acf3c16', class: hostClass }, this.hasImage() && (h("div", { key: '7eeb516267de1afcfa85fc7567999db488c2f4f5', class: "pds-radio__image-container", part: "image-container" }, h("slot", { key: 'a312fea06f0c015bffab3bb392ff04d4913fd1c0', 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

@@ -161,13 +161,13 @@ export class PdsRadioGroup {
     render() {
         const gapValue = this.getGapValue();
         const ariaDescribedBy = this.getAriaDescribedBy();
-        return (h(Host, { key: '9dc78eb36bbc1b872f4320203dbbc64e43816ebf', class: this.classNames(), id: this._groupId, role: "group", "aria-describedby": ariaDescribedBy, style: {
+        return (h(Host, { key: 'bf8063c1a99e272bb3f6bc647998a6ef103f8a71', class: this.classNames(), id: this._groupId, role: "group", "aria-describedby": ariaDescribedBy, style: {
                 '--pds-radio-group-gap': gapValue,
-            } }, this.groupLabel && (h("div", { key: '7b6f95608dcf356b141ef5d590ff3070f83b5975', class: "pds-radio-group__label" }, this.groupLabel)), h("div", { key: '6e1a634c9b81ca3f3bbbe9c6590bcd4efc97e6ea', class: {
+            } }, this.groupLabel && (h("div", { key: '8564ed3f8f99cdc1a0e5b189aacc6960923eb5f7', class: "pds-radio-group__label" }, this.groupLabel)), h("div", { key: '2309c9373790182cde030c1dbda88fa3bdcaaf12', 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: 'b5b16148f3c77d425a50b7ada8a822e9919ef5c5', onSlotchange: () => this.updateChildRadios() })), this.helperMessage && (h("div", { key: 'ca6b98f926b8d7a53fda630170ac037c99f5ee85', class: "pds-radio-group__message", id: messageId(this._groupId, 'helper') }, this.helperMessage)), this.errorMessage && (h("div", { key: '37b57e2622370364e619ea090712a7b79fe79501', class: "pds-radio-group__message pds-radio-group__message--error", id: messageId(this._groupId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '6a362d048a67312b1b227f71cc4b8f821ae0817e', icon: danger, size: "small" }), this.errorMessage))));
+            } }, h("slot", { key: 'd88dde3c631e25c01bc7b6d3ef5d517255fabd1a', onSlotchange: () => this.updateChildRadios() })), this.helperMessage && (h("div", { key: 'a229214ed01663b0fc34f35e27c7148b4eb412ab', class: "pds-radio-group__message", id: messageId(this._groupId, 'helper') }, this.helperMessage)), this.errorMessage && (h("div", { key: 'dc092f2e6dbef0cb369cf00a6eccf9a095a0313d', class: "pds-radio-group__message pds-radio-group__message--error", id: messageId(this._groupId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: 'd242da328731e55fa52d8e624fdfc750bfa6cce4', icon: danger, size: "small" }), this.errorMessage))));
     }
     static get is() { return "pds-radio-group"; }
     static get encapsulation() { return "scoped"; }

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

@@ -67,7 +67,7 @@ export class PdsRow {
             'min-height': this.minHeight,
         }));
         this.hostKeeper.record(`pds-row ${rowClasses}`, rowInlineStyles);
-        return h(Host, { key: 'ee3a32ae1376919c7c2d1fcf186a1b7c272ee085', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
+        return h(Host, { key: '78a505fef7132f9545916155d2485a6d2df8f4a5', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
     }
     static get is() { return "pds-row"; }
     static get originalStyleUrls() {

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

@@ -240,7 +240,7 @@ export class PdsSelect {
             'has-action': hasAction && !this.hideLabel ? 'true' : null,
         };
         this.hostKeeper.record(hostClass, {}, hostAttributes);
-        return (h(Host, Object.assign({ key: 'c99bfc000ad351298e154554a8b22635b1abb718', class: hostClass }, hostAttributes), h("div", { key: '35374b150cbef745c6a6068ba5a2fde0803c0314', class: "pds-select" }, !this.hideLabel && (h("div", { key: 'a3b9bae451c5c384606790a29bf8ab5fc70427c0', class: "pds-select__label-wrapper" }, h("label", { key: '80d7740a05a6d3cce6d51224169eb6c2501c4896', htmlFor: this.componentId }, h("span", { key: 'a51c02d7c84f75bb168889dab50cae807271c63d', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), hasAction && this.renderAction())), h("select", { key: '11444dad795bd02c008252a60e701125861e4af0', "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: 'ce54fa1df287d96a7503bb19cd2ba6c74a6da638', "aria-hidden": "true", class: "hidden", ref: (el) => (this.slotContainer = el) }, h("slot", { key: '22c55e78999076a37d43fb708dabc7379dd4cee3', onSlotchange: this.handleSlotChange })), this.renderMessages(), !this.multiple && h("pds-icon", { key: '45628074fbcdb259b8bba42299082423309a6968', "aria-hidden": "true", class: "pds-select__select-icon", icon: enlarge }))));
+        return (h(Host, Object.assign({ key: '343ed671e67dd1d6f9eb284b07e06d59877c64e9', class: hostClass }, hostAttributes), h("div", { key: '650aed0869b02f658feb16ee99f17e1cd22e5a8e', class: "pds-select" }, !this.hideLabel && (h("div", { key: '74739461acbea33c92279ec8ec9042d6af1773c1', class: "pds-select__label-wrapper" }, h("label", { key: '1ad96ffd243000358edfbd79054ee770e1ba97d3', htmlFor: this.componentId }, h("span", { key: 'b832868db4f9cd4fd2f8313054d2e96e106189ab', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), hasAction && this.renderAction())), h("select", { key: 'e83c1a1a0a5646fc8abf9e50bc374f52b56be773', "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: 'a34880120b88124b5122350856d023368f96abf7', "aria-hidden": "true", class: "hidden", ref: (el) => (this.slotContainer = el) }, h("slot", { key: 'df6abaf6a630761a32b263813181ff3453757e0d', onSlotchange: this.handleSlotChange })), this.renderMessages(), !this.multiple && h("pds-icon", { key: 'f9197284ef9965d693242a652b583f48bc3d7097', "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

@@ -48,7 +48,7 @@ export class PdsSortableItem {
     }
     render() {
         this.hostKeeper.record('pds-sortable-item');
-        return (h(Host, { key: '3f9098a7c938bfa6443f08fb8b0a7c7217230890', class: "pds-sortable-item", id: this.componentId }, this.showHandle && (h("div", { key: '77718a6867ddd8bc029bb3ef995f6ee9a5999ce7', class: "pds-sortable-item__handle" }, h("pds-icon", { key: 'aad7f46e776ece85858798f8f1a1a50c9022b84f', "aria-hidden": "true", icon: handleIcon }))), h("slot", { key: 'afa9346ec8fd7aa6132a15dd44d3b1cae24500b9' }), this.enableActions && (h("div", { key: 'c28c85391117542999c12d673879768394002c90', class: "pds-sortable-item__actions" }, h("slot", { key: '88ab53f3ba4ed47715e31935b861d9ab42342b32', name: "sortable-item-actions" })))));
+        return (h(Host, { key: '2065ccb474ae4b7032edc3c37aa6855f3048909d', class: "pds-sortable-item", id: this.componentId }, this.showHandle && (h("div", { key: '32385cc94837a3d0bc1c496615135c79274afe35', class: "pds-sortable-item__handle" }, h("pds-icon", { key: 'ea94e28b2867aa20622ca073dc31d3b4a11eebbb', "aria-hidden": "true", icon: handleIcon }))), h("slot", { key: 'fb18aa90be0b8fa3832a5dd2b02a7b571205341f' }), this.enableActions && (h("div", { key: '4c6e59d77a7b2183552533a544f4a70ce0cc7011', class: "pds-sortable-item__actions" }, h("slot", { key: '497b1ff88436175d9365a28032e109b6fa118e44', 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

@@ -70,7 +70,7 @@ export class PdsSortable {
     render() {
         const classNames = this.classNames();
         this.hostKeeper.record(classNames);
-        return (h(Host, { key: 'fb6e9a79babf01980c04ee7208d195510493a7dc', class: classNames, id: this.componentId }, h("slot", { key: '5735ca3af531a736f07d1fafde8ae544d00a75bb' })));
+        return (h(Host, { key: 'a0e532d31561748b4632a6be9163562f990af804', class: classNames, id: this.componentId }, h("slot", { key: 'd1b0defb683f841e6708374fff4bf62eb7fd5080' })));
     }
     static get is() { return "pds-sortable"; }
     static get encapsulation() { return "scoped"; }

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

@@ -101,9 +101,9 @@ export class PdsSwitch {
         const hostClass = this.switchClassNames();
         const ariaDisabled = this.disabled ? 'true' : null;
         this.hostKeeper.record(hostClass, {}, { 'aria-disabled': ariaDisabled });
-        return (h(Host, { key: '6d4b51307f2619a99981e344f782f69871aabf0f', class: hostClass, "aria-disabled": ariaDisabled }, h("label", { key: '068ef3759e2bc3d9870cff36714de0e9cf558b2b', htmlFor: this.componentId }, h("input", Object.assign({ key: 'aa28fb67332bb2d81c09b6c749c1cb0f079e327f', "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: 'd237980a9ce2abc04d57085df022f28dfa2768e4', class: this.hideLabel ? 'visually-hidden' : '' }, h("slot", { key: '83d0e2110cfdcd3208319302af237178dfd419a4', name: "label", onSlotchange: this.updateHasLabelSlot }), !this.hasLabelSlot && this.label)), this.helperMessage &&
-            h("div", { key: '137d9e5626b34ade33f68c4c24c3dcb154500dc6', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            h("div", { key: '64c3b8884d0568e26953f67a95d045aa5731c41f', class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: 'f99f8045eb33d0c60518f3b4c6a0183170a50f4a', icon: danger, size: "small" }), this.errorMessage)));
+        return (h(Host, { key: 'ee8576e523348ff9eed1b6087626849bb0966608', class: hostClass, "aria-disabled": ariaDisabled }, h("label", { key: '09433b5356d718be65f4f2eb61f35fff1d000e10', htmlFor: this.componentId }, h("input", Object.assign({ key: 'f996a0fad56119674cfb7d95e1444bf411b64396', "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: '4b23305d3cc0f5b37b23c6b79a14cfba57c16816', class: this.hideLabel ? 'visually-hidden' : '' }, h("slot", { key: '258b5ccf0d4b01518df3a37772d694cb37569ffa', name: "label", onSlotchange: this.updateHasLabelSlot }), !this.hasLabelSlot && this.label)), this.helperMessage &&
+            h("div", { key: 'c8196fa2ce832de3a8c6d987a78fd65d791c4c59', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            h("div", { key: '948894dd2e642689af6cad545a0b31f7c4711d87', class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: 'd4b72b49bfd38a396b8f7c0686e1b2ef92d65491', icon: danger, size: "small" }), this.errorMessage)));
     }
     static get is() { return "pds-switch"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class PdsTableBody {
     render() {
-        return (h(Host, { key: '0278bf4c680e9054748039dddbbb5cfcce3bb4e6', role: "rowgroup", part: "body" }, h("slot", { key: '44cf68f3b0dff78312a3d31d898209544ce8131e' })));
+        return (h(Host, { key: '817532e93c8f91ef64cd0f90aa6c4372c3b7d83f', role: "rowgroup", part: "body" }, h("slot", { key: '296ba876c6716e85252a06008bd55d59624223e3' })));
     }
     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

@@ -123,11 +123,11 @@ export class PdsTableCell {
         return classNames.join(' ');
     }
     render() {
-        return (h(Host, { key: 'c32bd43c6080e9a8a98578016973de9025e5d367', class: this.classNames(), role: "gridcell", part: "cell", style: this.tableRef &&
+        return (h(Host, { key: 'bedaeeb5723299656f872a760ed1dd80c7fe8793', class: this.classNames(), role: "gridcell", part: "cell", style: this.tableRef &&
                 this.tableRef.fixedColumn &&
                 this.tableRef.selectable
                 ? { '--fixed-cell-position': '40px' }
-                : {} }, h("slot", { key: '5b2af30784f41dcc7a0f66187f222ec2472f207f' })));
+                : {} }, h("slot", { key: '45182ee3e004097660432f552780b3d27671bd46' })));
     }
     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

@@ -42,7 +42,7 @@ export class PdsTableHead {
         }
     }
     render() {
-        return (h(Host, { key: 'ca88406002f440e9b9eefa639dac056e85403bd8', role: "row", part: "head" }, this.tableRef && this.tableRef.selectable && (h("pds-table-head-cell", { key: '7c1939791a0573c6eccdec66d7b6d5de122a42c1', part: this.tableRef.selectable ? 'checkbox-cell' : '' }, !this.tableRef.disableSelectAll && (h("pds-checkbox", { key: '3a8581bbf9b5fc26396937e7d0bab370f6078090', 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: 'a736a10378936d4e4de5b139f3f57a345483c1bb' })));
+        return (h(Host, { key: 'de3faae735e90f5fde1258b5acb826f5f9dbd170', role: "row", part: "head" }, this.tableRef && this.tableRef.selectable && (h("pds-table-head-cell", { key: 'e590e57c8b37ec0ad18e96077401c4692bbd45a4', part: this.tableRef.selectable ? 'checkbox-cell' : '' }, !this.tableRef.disableSelectAll && (h("pds-checkbox", { key: '44ca7eda63185672939909e121a86e6502080a7d', 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: '0671df85d7989cff7266bfd3d1b4d62b332d2e81' })));
     }
     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

@@ -199,11 +199,11 @@ export class PdsTableHeadCell {
         return classNames.join(' ');
     }
     render() {
-        return (h(Host, { key: 'de7b2fb674def0a8046e1940488d435176dc9851', class: this.classNames(), role: "columnheader", onClick: this.toggleSort, part: "head-cell", style: this.tableRef &&
+        return (h(Host, { key: '13de42d136c5b037cd1545cd5b789b4660e23b87', 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: '4ada173faf7d106cca34920540703a1d04f7e5bd' }), this.sortable && this.isActive && (h("pds-icon", { key: '1b0e87d74b6fa359e901a8e66479f37a88cdcf1c', icon: this.sortingDirection === 'asc' ? upSmall : downSmall, part: "sort-icon" }))));
+                : {} }, h("slot", { key: '96084d87a34d7b601a8e8325f344f1fe6601204e' }), this.sortable && this.isActive && (h("pds-icon", { key: 'cba838fa029b280561676c2b57af7f8f00055511', icon: this.sortingDirection === 'asc' ? upSmall : downSmall, part: "sort-icon" }))));
     }
     static get is() { return "pds-table-head-cell"; }
     static get encapsulation() { return "shadow"; }

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

@@ -137,7 +137,7 @@ export class PdsTableRow {
         }
     }
     render() {
-        return (h(Host, { key: '16ca08eefa74468559a1c084b7619836f01b27af', class: this.classNames(), role: "row", part: "row" }, this.tableRef && this.tableRef.selectable && (h("pds-table-cell", { key: '4b4d2ae15d519e08cd6710ddb6759923d478457c', part: this.tableRef.fixedColumn ? 'checkbox-cell' : 'checkbox-cell', class: this.tableRef.selectable ? 'has-checkbox' : '' }, h("pds-checkbox", { key: '78b9a731113cce82c59f40713561033f563ffc5f', componentId: this.generateUniqueId(), onPdsCheckboxChange: this.handleCheckboxChange, indeterminate: this.indeterminate, label: "Select Row", hideLabel: true, checked: this.isSelected, part: "row-checkbox" }))), h("slot", { key: '5522f2335912f59013e9fc1e1fc6070d645cd519' })));
+        return (h(Host, { key: '5323521abc5c2464299cf77520fb38ec81297866', class: this.classNames(), role: "row", part: "row" }, this.tableRef && this.tableRef.selectable && (h("pds-table-cell", { key: 'eb94dd282f885d3466b6177b2454cbcc4f932466', part: this.tableRef.fixedColumn ? 'checkbox-cell' : 'checkbox-cell', class: this.tableRef.selectable ? 'has-checkbox' : '' }, h("pds-checkbox", { key: '222eaaedd4bebddc18cebf01bf4da81004773a96', componentId: this.generateUniqueId(), onPdsCheckboxChange: this.handleCheckboxChange, indeterminate: this.indeterminate, label: "Select Row", hideLabel: true, checked: this.isSelected, part: "row-checkbox" }))), h("slot", { key: '010f222fa02b1809ff818f7a030c2a12fc3e3abb' })));
     }
     static get is() { return "pds-table-row"; }
     static get encapsulation() { return "shadow"; }