@pine-ds/core 4.0.0 → 4.1.0

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

@@ -12,6 +12,26 @@
   width: 1px;
 }
 
+.pds-divider--labeled {
+  align-items: center;
+  background: none;
+  color: var(--pine-color-text);
+  font: var(--pine-typography-body-sm-medium);
+  gap: var(--pine-dimension-sm);
+  height: auto;
+  width: auto;
+}
+.pds-divider--labeled::before, .pds-divider--labeled::after {
+  background: var(--pine-color-border);
+  content: "";
+  flex: 1;
+  height: var(--pine-border-width);
+}
+
+.pds-divider__label {
+  text-align: center;
+}
+
 .pds-divider--offset-xxs {
   margin: 0 calc(var(--pine-dimension-2xs) * -1);
   padding: 0 var(--pine-dimension-2xs);
@@ -20,6 +40,9 @@
   margin: calc(var(--pine-dimension-2xs) * -1) 0;
   padding: var(--pine-dimension-2xs) 0;
 }
+.pds-divider--offset-xxs.pds-divider--labeled {
+  padding: 0;
+}
 
 .pds-divider--offset-xs {
   margin: 0 calc(var(--pine-dimension-xs) * -1);
@@ -29,6 +52,9 @@
   margin: calc(var(--pine-dimension-xs) * -1) 0;
   padding: var(--pine-dimension-xs) 0;
 }
+.pds-divider--offset-xs.pds-divider--labeled {
+  padding: 0;
+}
 
 .pds-divider--offset-sm {
   margin: 0 calc(var(--pine-dimension-sm) * -1);
@@ -38,6 +64,9 @@
   margin: calc(var(--pine-dimension-sm) * -1) 0;
   padding: var(--pine-dimension-sm) 0;
 }
+.pds-divider--offset-sm.pds-divider--labeled {
+  padding: 0;
+}
 
 .pds-divider--offset-md {
   margin: 0 calc(var(--pine-dimension-md) * -1);
@@ -47,6 +76,9 @@
   margin: calc(var(--pine-dimension-md) * -1) 0;
   padding: var(--pine-dimension-md) 0;
 }
+.pds-divider--offset-md.pds-divider--labeled {
+  padding: 0;
+}
 
 .pds-divider--offset-lg {
   margin: 0 calc(var(--pine-dimension-lg) * -1);
@@ -56,6 +88,9 @@
   margin: calc(var(--pine-dimension-lg) * -1) 0;
   padding: var(--pine-dimension-lg) 0;
 }
+.pds-divider--offset-lg.pds-divider--labeled {
+  padding: 0;
+}
 
 .pds-divider--offset-xl {
   margin: 0 calc(var(--pine-dimension-xl) * -1);
@@ -65,6 +100,9 @@
   margin: calc(var(--pine-dimension-xl) * -1) 0;
   padding: var(--pine-dimension-xl) 0;
 }
+.pds-divider--offset-xl.pds-divider--labeled {
+  padding: 0;
+}
 
 .pds-divider--offset-xxl {
   margin: 0 calc(var(--pine-dimension-2xl) * -1);
@@ -74,6 +112,9 @@
   margin: calc(var(--pine-dimension-2xl) * -1) 0;
   padding: var(--pine-dimension-2xl) 0;
 }
+.pds-divider--offset-xxl.pds-divider--labeled {
+  padding: 0;
+}
 
 @media (max-width: 767px) {
   .pds-divider--vertical {

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

@@ -1,4 +1,7 @@
 import { Host, h } from "@stencil/core";
+/**
+ * @part label - Exposes the label text for styling, such as a custom color. Appears only when `label` is set and `vertical` is `false`.
+ */
 export class PdsDivider {
     constructor() {
         /**
@@ -7,11 +10,18 @@ export class PdsDivider {
          */
         this.vertical = false;
     }
+    get hasLabel() {
+        var _a;
+        return Boolean((_a = this.label) === null || _a === void 0 ? void 0 : _a.trim()) && !this.vertical;
+    }
     classNames() {
         const classNames = ['pds-divider'];
         if (this.vertical) {
             classNames.push('pds-divider--vertical');
         }
+        if (this.hasLabel) {
+            classNames.push('pds-divider--labeled');
+        }
         if (this.offset) {
             const offsetClassName = 'pds-divider--offset-' + this.offset;
             classNames.push(offsetClassName);
@@ -19,7 +29,7 @@ export class PdsDivider {
         return classNames.join(' ');
     }
     render() {
-        return (h(Host, { key: 'c3a01882db1119b8397353aaed193813cba0bfb8', id: this.componentId }, h("hr", { key: 'fe20a28dbd2f10cec125df4dbb4ba7a2837628f1', class: this.classNames() })));
+        return (h(Host, { key: 'c6f887ca1f68c8e572bd518c43d88f052f6d9dd1', id: this.componentId }, this.hasLabel ? (h("div", { class: this.classNames(), role: "separator", "aria-label": this.label }, h("span", { class: "pds-divider__label", part: "label", "aria-hidden": "true" }, this.label))) : (h("hr", { class: this.classNames() }))));
     }
     static get is() { return "pds-divider"; }
     static get encapsulation() { return "shadow"; }
@@ -54,6 +64,25 @@ export class PdsDivider {
                 "reflect": false,
                 "attribute": "component-id"
             },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Text to be displayed as the divider label, centered between two lines. Ignored when `vertical` is `true`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
             "offset": {
                 "type": "string",
                 "mutable": false,

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

@@ -8,6 +8,7 @@ export default {
 const BaseTemplate = (args) => html`
   <pds-divider
     component-id=${args.componentId}
+    label=${args.label ?? ''}
     offset=${args.offset}
     vertical=${args.vertical}
   />`;
@@ -21,3 +22,9 @@ export const Vertical = BaseTemplate.bind();
 Vertical.args = {
   vertical: true,
 }
+
+export const WithLabel = BaseTemplate.bind();
+WithLabel.args = {
+  label: 'Today',
+  vertical: false,
+}

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

@@ -72,7 +72,7 @@ export class PdsDropdownMenuItem {
             }, tabIndex: this.disabled ? -1 : 0, type: "button", part: "button", onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : null }, h("slot", null)));
     }
     render() {
-        return (h(Host, { key: 'd2a6c182b330dae3738650002a4643c0f1fd3d1a', id: this.componentId, class: { 'is-disabled': this.disabled, 'destructive': !this.disabled && this.destructive }, onClick: () => !this.disabled && this.handleClick(), role: "none", tabIndex: -1, "aria-disabled": this.disabled ? 'true' : null }, this.renderElement()));
+        return (h(Host, { key: '5d27080b7e129f69255ecb9dd1fab183a8f7c5f6', id: this.componentId, class: { 'is-disabled': this.disabled, 'destructive': !this.disabled && this.destructive }, onClick: () => !this.disabled && this.handleClick(), role: "none", tabIndex: -1, "aria-disabled": this.disabled ? 'true' : null }, this.renderElement()));
     }
     static get is() { return "pds-dropdown-menu-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -8,7 +8,7 @@ export class PdsDropdownMenuSeparator {
         this.disabled = false;
     }
     render() {
-        return (h(Host, { key: '1058ea61d2ad7c311ee162b909df2531f3589e4c', id: this.componentId }, h("hr", { key: 'a8c2f69ef5fba5ea4ea74553fe72544e31eafb1b' })));
+        return (h(Host, { key: 'd0fbf00978860c7a449b5781db2f10dd7e99d1b1', id: this.componentId }, h("hr", { key: 'a566c55fc3f15c0dab81fc90f5cf35d77fc0e35c' })));
     }
     static get is() { return "pds-dropdown-menu-separator"; }
     static get encapsulation() { return "shadow"; }

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

@@ -306,7 +306,7 @@ export class PdsDropdownMenu {
         }
     }
     render() {
-        return (h(Host, { key: '467662b4b14612153ba10a4d3a6f578edec52d89', id: this.componentId }, h("slot", { key: 'ba1b44fe9276b96fd123694742a34bd7c8717a3d', name: "trigger", onSlotchange: this.handleTriggerSlotChange }), h("pds-box", { key: '8287d0cc6fea80eeb73ca355eb247883d6257c19', "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: '5d5aa3cc226fabaadb4572bfa38f9189dbcb55c7', onSlotchange: this.handleSlotChange }))));
+        return (h(Host, { key: '30914965241f7e8e5af32e8576c651802026a996', id: this.componentId }, h("slot", { key: 'ec995c9437083ca28058b974df91491b0e634a07', name: "trigger", onSlotchange: this.handleTriggerSlotChange }), h("pds-box", { key: '590a22e556d4df23eb33cbe2fa2bda296ce59b01', "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: '9b0d67a3cf63b33eb73d3e451b365dc4354a323c', onSlotchange: this.handleSlotChange }))));
     }
     static get is() { return "pds-dropdown-menu"; }
     static get encapsulation() { return "shadow"; }

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: '620b1e6b9ab4a16af9cf601381e3b3bc625677a9', id: this.componentId }, h("button", { key: '6c27edb5a9584e223f0716ae2c95cf07488a041b', 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: 'ef9970dc8d453d170703e90ba8690b652e11fa5c', class: "pds-filter__button-content", part: "button-content" }, this.renderIcon(), this.text && (h("span", { key: '8e71b9d19327117dbce1cf50d169699ab771d362', class: "pds-filter__button-text", part: "button-text" }, this.text)), this.renderDropdownIcon())), this.variant !== 'clear' && (h("div", { key: 'e1eb24326d93b0247db0e11700286af74b6b19c1', ref: el => this.popoverEl = el, id: `${this.componentId}-popover`, class: "pds-filter__popover", popover: "auto", part: "popover" }, h("slot", { key: '374f65b6dab21601c1bbd86cf661971a5c6d1d43' })))));
+        return (h(Host, { key: '6d40e2462bf70dcd26c0e3c5ab6f12e86c65ac49', id: this.componentId }, h("button", { key: '2d45a9b8ae4fd3a4d1ecc04c29ccf83fe5756e50', 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: 'b80e2c8c4f92d17c37fa5a0c1fcc3f778f788483', class: "pds-filter__button-content", part: "button-content" }, this.renderIcon(), this.text && (h("span", { key: '5faa099b94200071325ab8fb1b122437a81dcf61', class: "pds-filter__button-text", part: "button-text" }, this.text)), this.renderDropdownIcon())), this.variant !== 'clear' && (h("div", { key: '063bc00fedda0fba5ba4af759404f3ae23b2b6ad', ref: el => this.popoverEl = el, id: `${this.componentId}-popover`, class: "pds-filter__popover", popover: "auto", part: "popover" }, h("slot", { key: '9790cd0c8cd6a594aab094aeaa469dbcddc98d87' })))));
     }
     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: '7007a635d3866781dfd67bd2d3b2dab46d36cffc', id: this.componentId }, h("div", { key: 'e6eb4c76bfb39050aaa01ad297df995de7df484b', class: "pds-filters" }, h("slot", { key: '543c83c7422b3e1e9a2446618fe8119d76478df4' }))));
+        return (h(Host, { key: '0f4dc3d5ecf71992a4c13f85fec62d4b60f3c6d1', id: this.componentId }, h("div", { key: 'ee3edc3d752c70d7888028b45dcb1c89f297803c', class: "pds-filters" }, h("slot", { key: 'de693eedf74a029a0a279855cd2602420891ef10' }))));
     }
     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: 'fa205f03d5c378d27a66cbfd520ae2bc7ab9e9df', class: {
+        return (h(Host, { key: 'dbc144927d78e2eb380639eeb8b243133a4b5379', class: {
                 'pds-image': true,
-            }, id: this.componentId }, h("img", { key: '8d03dddf6e924ef8aebea2bf34a32e326bee329a', 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: '259c1cd7ffdf4e5dd7c0ef178d28f1f835b57642', 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

@@ -286,10 +286,10 @@ export class PdsInput {
             'has-prepend': this.hasPrepend,
             'has-append': this.hasAppend,
         };
-        return (h(Host, { key: 'ecf4cc212e5c3ebc18082b790803e6b2ccb8ca77', "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: 'acdf92a30068fc04a17816ec6d85295b47e512ee', class: "pds-input" }, label && (h("div", { key: '4569f0b3761db89e85a090eff6af1c47cb562115', class: {
+        return (h(Host, { key: '8f15b61e4a6336246aefca1112c280265996630a', "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: '9e45a632a63b813f2f097ef903db9e97f6b88b16', class: "pds-input" }, label && (h("div", { key: 'e9e3710cfa43372a71bbf2440110cd43336c16e3', class: {
                 'pds-input__label-wrapper': true,
                 'visually-hidden': this.hideLabel,
-            } }, h("label", { key: '90b0a863d78115fa158429db11548fc2a9ee5ae6', htmlFor: componentId, class: "pds-input__label" }, h("span", { key: '3d440aaafc4daeffe45152cd23d27472d7ebf85a' }, label, this.required && h("span", { key: 'c7bf6ef6191e961a106b8885cab604aa89730eba', class: "pds-input__required-indicator" }, " *"))), !this.hideLabel && this.renderAction())), h("div", { key: '81f0b8a347bc9a06c753b9f31f5e30ac78e45adb', class: inputWrapperClasses }, this.renderPrepend(), this.renderPrefix(), h("input", Object.assign({ key: '41ed8dab6f7c71c6c382627ca4dc48bb95c1161d', 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: '4791ddeb01b758a94a2fddfec6093b9b39eefafa', class: "pds-input__helper-message", id: messageId(componentId, 'helper') }, helperMessage)), errorMessage && (h("p", { key: 'd0a22ae4b0e400e1d5df55e35c0aaaa5c5ea3ab7', class: "pds-input__error-message", id: messageId(componentId, 'error') }, h("pds-icon", { key: '69975cdcc15e5ab6df9e2c354977e2c6dae18f6e', "aria-hidden": "true", icon: danger, size: "small" }), errorMessage)))));
+            } }, h("label", { key: '0717152167b9f8776e23bb95d0b3ebdc58a27e8e', htmlFor: componentId, class: "pds-input__label" }, h("span", { key: 'cf350936ac9981da1773c7320d5092da2d8aa5c6' }, label, this.required && h("span", { key: '115e170ee93a5bc2c4c396aaf235fd0e6ae09a13', class: "pds-input__required-indicator" }, " *"))), !this.hideLabel && this.renderAction())), h("div", { key: '00839202f48a22c6a6f00fa706eee81314dc1c04', class: inputWrapperClasses }, this.renderPrepend(), this.renderPrefix(), h("input", Object.assign({ key: 'cb2234ebf58e2148ea6b4b711ff09338722d4457', 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: 'e322e25b5d6d8fe9c7292087127d7d44c0a27046', class: "pds-input__helper-message", id: messageId(componentId, 'helper') }, helperMessage)), errorMessage && (h("p", { key: 'e3a982cf8312fa2a16360a4667fa5286ce304e68', class: "pds-input__error-message", id: messageId(componentId, 'error') }, h("pds-icon", { key: 'ffa236865ab93013f54ea0bf2f993a3c3631e919', "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: '5d0c5a0a5b8b80a8cdff802a3d78dad85a9ccdc4', 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: '06b7be14d867eae1b7acba8570f1e94bdf840fbb' }, this.href), showExternalIcon &&
-            h("pds-icon", { key: '678414f7d20fd20b6931cc401163180c3ad0094c', icon: launch, size: this.fontSize })));
+        return (h("a", { key: '532bc4afd39f637b021556875a1744dd85d4a227', 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: '854b411525e89363fbc13fb3119c4f04e611d0a0' }, this.href), showExternalIcon &&
+            h("pds-icon", { key: 'c670f8c1f46bd55b6ebd735a98c0dbff8eb24076', 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

@@ -46,7 +46,7 @@ export class PdsLoader {
         }
     }
     render() {
-        return (h(Host, { key: 'fc312fc9ebf973506190e693cd251f25e37f3d0a', class: `pds-loader ${this.isLoading ? '' : 'pds-loader--hidden'}`, "aria-hidden": !this.isLoading, "aria-busy": this.isLoading, "aria-live": "polite" }, this.variant === 'spinner' && (h("div", { key: 'c9eab32510368d1fd6db7669b3db640c229911f2', class: "pds-loader--spinner" }, h("svg", { key: '359d9f171378064c6121e583efe09eace3377e44', style: this.getSvgStyle(), viewBox: "0 0 200 200", fill: "none", part: "loader-svg" }, h("defs", { key: '263409d92ab95fa34df4e879934e04e6a587f23b' }, h("linearGradient", { key: 'e9b32747efcb60bbebd8734fdd2c2d5a400974c1', id: "spinner-secondHalf" }, h("stop", { key: 'db61c891cf635b72e36a152b944b6c9ce3569be3', offset: "0%", "stop-opacity": "0", "stop-color": "currentColor" }), h("stop", { key: 'fb964af08941ad174ecaf0c329d79e25fff45a9c', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" })), h("linearGradient", { key: '89d815d1f076ffe82d189d51fce14fb48ecb0926', id: "spinner-firstHalf" }, h("stop", { key: '43b753f80ab136d38635a6ab921899fc8fd3a6b2', offset: "0%", "stop-opacity": "1", "stop-color": "currentColor" }), h("stop", { key: '7ce201ac86ae5cd291f8fba22f1e6517d53af025', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" }))), h("g", { key: 'ea7e594df07f7d634fa2142785f0791b21a71d41', class: "pds-loader__spinner-path" }, h("path", { key: '8ac8cead5078716ca9169150be8c0c64ecedc854', stroke: "url(#spinner-secondHalf)", d: "M 4 100 A 96 96 0 0 1 196 100" }), h("path", { key: 'c4ed3d7f386ac59dcb540b369f52925b216ea950', stroke: "url(#spinner-firstHalf)", d: "M 196 100 A 96 96 0 0 1 4 100" }), h("path", { key: 'ecc2e2b7240c23e35af8b9aa049ac45dff43ac9f', stroke: "currentColor", "stroke-linecap": "round", d: "M 4 100 A 96 96 0 0 1 4 98" }))))), this.variant === 'typing' && (h("div", { key: '8cb7180432a6cca86c7fcc2af3f1e05afb751a9d', class: "pds-loader--typing" }, h("span", { key: 'c09247cbcf86fef899f206bee1458a1388cbdd39' }), h("span", { key: '07bdfe8ab1971fa20544022412e2141721111506' }), h("span", { key: '9444f7ed6a13475694e1eda50b891ff63fb91297' }))), h("div", { key: '3b717ff6b9f38f9710ca0556ebbc66bd86b7e1b6', class: `pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}` }, h("slot", { key: 'ab65224fab189a30d0cf18caf086c621cbd78eaa', name: "label" }, "Loading..."))));
+        return (h(Host, { key: '288e980a91a4a05984ec7d16c198cff227a2e676', class: `pds-loader ${this.isLoading ? '' : 'pds-loader--hidden'}`, "aria-hidden": !this.isLoading, "aria-busy": this.isLoading, "aria-live": "polite" }, this.variant === 'spinner' && (h("div", { key: 'dc8643b932182b540ce93dd87dad10f07174d59f', class: "pds-loader--spinner" }, h("svg", { key: '2cec5ddfdf9772c0d20ce11a6bf070d0bc06a53b', style: this.getSvgStyle(), viewBox: "0 0 200 200", fill: "none", part: "loader-svg" }, h("defs", { key: 'f2554f75fe1bd3e0e3afc1947220d3c004184e84' }, h("linearGradient", { key: 'edef079f8b959604ec9f911739a78801c5f285c0', id: "spinner-secondHalf" }, h("stop", { key: '337a53ea77d19e9dfd3a5d43f01f6886c71f190b', offset: "0%", "stop-opacity": "0", "stop-color": "currentColor" }), h("stop", { key: 'ca2e6363e2feece31ba1a4b2de0d3ec66c4c45f9', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" })), h("linearGradient", { key: '5458cf7f8e9e35e23dfc5aa4e5f7ef5c7b9d142d', id: "spinner-firstHalf" }, h("stop", { key: '7cbb4bc34f8792e648c8bf1bfe6db8e319bf68cf', offset: "0%", "stop-opacity": "1", "stop-color": "currentColor" }), h("stop", { key: 'febbf165e3da7d328dfa35cf5930a8069fea604e', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" }))), h("g", { key: 'a2becedb247748508013f80c9dbd6eccc6818e6f', class: "pds-loader__spinner-path" }, h("path", { key: '2df230f57210ee7c10ff22d99d3fd8a1dd17b217', stroke: "url(#spinner-secondHalf)", d: "M 4 100 A 96 96 0 0 1 196 100" }), h("path", { key: 'b85ae9aebe39f99d1d06a3e03e8ef7027fa8a866', stroke: "url(#spinner-firstHalf)", d: "M 196 100 A 96 96 0 0 1 4 100" }), h("path", { key: '9f0508fdf50f6274e2b0656565585198f6105b68', stroke: "currentColor", "stroke-linecap": "round", d: "M 4 100 A 96 96 0 0 1 4 98" }))))), this.variant === 'typing' && (h("div", { key: '0520d0113a7b4498692e523c273616d67b90f042', class: "pds-loader--typing" }, h("span", { key: 'a1083f20b9cd04d1ba685aafd736fcd154dc597f' }), h("span", { key: '9eab7a6bfcca61861cbdd01953b2aa0762770b80' }), h("span", { key: 'd4599150cd603fcfe6b2f50044a0ed867fad6070' }))), h("div", { key: 'b37bc877a5fd6cd7249b10bca48ac50eb31f4f40', class: `pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}` }, h("slot", { key: '689ca4190506689ca6c92b61ada5c96a2a1427ab', 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

@@ -178,10 +178,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: 'f3e75b90be56bb27ba5f4fde473fac474846f346' }, h("div", { key: '5035d5fa319fe2aaa8adffb825f0d2babfd11a26', class: {
+        return (h(Host, { key: '3e8e95b159205c5c8183eb7f6c60d358290e0896' }, h("div", { key: '97988c0bbcbf256fc3369ccedefe854dd196ef82', class: {
                 'pds-modal-content': true,
                 [`pds-modal-content--border-${this.border}`]: true
-            }, style: styleObj, tabindex: "-1" }, h("slot", { key: '73299f6f7045ea50a5bf134da04f1e30cd9f233c' }))));
+            }, style: styleObj, tabindex: "-1" }, h("slot", { key: 'c76eb4759b7bf4898845b65768908c896fe64f4e' }))));
     }
     static get is() { return "pds-modal-content"; }
     static get originalStyleUrls() {

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

@@ -6,7 +6,7 @@ export class PdsModalFooter {
         unwrapReconnectedContent(this.el.querySelector('.pds-modal__footer'), '.pds-modal__footer');
     }
     render() {
-        return (h("footer", { key: '1220d6319585df0128924ebac52569af7645f525', class: "pds-modal__footer" }, h("slot", { key: '1bbbf4897f41c802fc5773154cee3930290c906a' })));
+        return (h("footer", { key: '63bb557978ea69aa658026f7be24433b946b2ee6', class: "pds-modal__footer" }, h("slot", { key: '158a929229b0efa8720f869756076203f297c744' })));
     }
     static get is() { return "pds-modal-footer"; }
     static get originalStyleUrls() {

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

@@ -6,7 +6,7 @@ export class PdsModalHeader {
         unwrapReconnectedContent(this.el.querySelector('.pds-modal__header'), '.pds-modal__header');
     }
     render() {
-        return (h("header", { key: '0fd8a216ae8dc149b59cd29c8706d5a45a21de15', class: "pds-modal__header" }, h("slot", { key: '4bf075dfd4870621e6e0b710fcdb42aac53810b3' })));
+        return (h("header", { key: 'ae4277052c04a1804e0e73f2873e636ea4cb890c', class: "pds-modal__header" }, h("slot", { key: '5c4a7b463835de451c9c3f15e0ac669bf32aee23' })));
     }
     static get is() { return "pds-modal-header"; }
     static get originalStyleUrls() {

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

@@ -268,14 +268,14 @@ export class PdsModal {
         return thisZIndex === maxZIndex;
     }
     render() {
-        return (h("dialog", { key: '134e913f0bf5d7bf77e67f00707a399fae986fcb', class: {
+        return (h("dialog", { key: '65d204a57e193022eb475c113438a40fc77cf545', 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: '6cb819a92c00b5c8676b4d1a84301896373305f3', class: {
+            }, "aria-modal": this.disableTopLayer ? 'false' : 'true', "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick }, h("div", { key: 'a9f07a30f8b4d13ef7ac33068756f0fb03173e27', class: {
                 'pds-modal': true,
                 [`pds-modal--${this.size}`]: true,
                 'pds-modal--scrollable': this.scrollable
-            }, part: "modal" }, h("slot", { key: 'aff0f88a7b9e1b4b681a6a14636153ce3a6907d5' }))));
+            }, part: "modal" }, h("slot", { key: '8505057bef9b4ed60e51422b05fea08cefce4a4b' }))));
     }
     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: '6e7f71b339764894e1f17d253fc3c8e0243e4f90', class: backdropClasses }, h("div", { key: '25b2f82c1af743156d152880631d4294dfec68b5', class: modalClasses, role: "dialog", "aria-modal": "true", "aria-labelledby": this.componentId ? `${this.componentId}-heading` : null, part: "modal" }, h("div", { key: '6bc97e805daee5e5dd547fa0b919a05cf1b6a6a1', class: "pds-modal__header" }, h("slot", { key: 'd9e7c248d983e3c055ed7e0aea5a4d5a15dfea12', name: "header" })), h("div", { key: '5608ee069b59cb34dc812bde22f83c6bce7e6904', class: "pds-modal-content" }, h("slot", { key: '6e3e790330598e1bde733350e5e216d269426e51' })), h("div", { key: '381f3c4e1c9c83b0687e1f1484b64334e388d669', class: "pds-modal__footer" }, h("slot", { key: '6e3a3cb64623de59a409072ab9c1bf65af8c2f6c', name: "footer" })))));
+        return (h("div", { key: 'cb0c1ce177b2c5bbc03c6310d1c61c2e56c87371', class: backdropClasses }, h("div", { key: '0f25e178dafa91d9c9721180c933faacb03b9360', class: modalClasses, role: "dialog", "aria-modal": "true", "aria-labelledby": this.componentId ? `${this.componentId}-heading` : null, part: "modal" }, h("div", { key: '849c0e574e020c828b3ef8a89e39ffdd6f8da68f', class: "pds-modal__header" }, h("slot", { key: '0c8bcac99adafbbfe67641e3782722bbe1ac13be', name: "header" })), h("div", { key: '5da01ac584f1b6d1ec8b535f6be2ac9f06ac2218', class: "pds-modal-content" }, h("slot", { key: '60ab585878ef793930fb18c363c284249123f423' })), h("div", { key: 'ec6f26f3fa36175cf1a6acc34807c2528b8ed886', class: "pds-modal__footer" }, h("slot", { key: 'da9896baba61891eceb7805c6967741fa86906dc', name: "footer" })))));
     }
     static get is() { return "mock-pds-modal"; }
     static get originalStyleUrls() {

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

@@ -1021,10 +1021,10 @@ export class PdsMultiselect {
     }
     render() {
         const hasSelections = this.selectedItems.length > 0;
-        return (h(Host, { key: '4a54a778522d0a1d2f45c32928e7a663f19c0189', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: '3593eb4fa1a0ae575b1c0ed03f0763dcea04c9e6', class: "pds-multiselect", onFocusout: this.handleContainerFocusOut }, this.label && (h("label", { key: 'f91a680ae3c3021bac6bd99368d3ef6ad6438898', id: `${this.componentId}-label`, htmlFor: this.componentId, class: {
+        return (h(Host, { key: 'a27955b3d4a7723dc92af6f9f1a4c56da5d392c6', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: '1bbea74e106b5980427610e9cbe27e2b686ded53', class: "pds-multiselect", onFocusout: this.handleContainerFocusOut }, this.label && (h("label", { key: 'a1ba54ded3bf660d234ce430056d1b70058d4e47', id: `${this.componentId}-label`, htmlFor: this.componentId, class: {
                 'pds-multiselect__label': true,
                 'visually-hidden': this.hideLabel,
-            } }, this.label)), h("div", { key: 'de2899f19057b8cd19cf3467251d03c1b43b73f5', class: "pds-multiselect__wrapper", ref: el => (this.containerEl = el), style: { width: this.triggerWidth } }, this.selectedDisplay === 'pill' && this.pillPosition === 'inline' ? (h("div", { ref: el => (this.pillInlineTriggerEl = el || undefined), part: "trigger", class: {
+            } }, this.label)), h("div", { key: '74cd041317c59042452dd9b3e9d165cc88be5ecc', class: "pds-multiselect__wrapper", ref: el => (this.containerEl = el), style: { width: this.triggerWidth } }, 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,
@@ -1040,7 +1040,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", { 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' })))));
+            } }, this.getTriggerText()), h("pds-icon", { class: "pds-multiselect__icon", icon: enlarge }))), this.renderDropdown()), this.selectedDisplay === 'pill' && this.pillPosition === 'below' && this.renderBelowPills(), h("span", { key: '38056bbcdb0b865e9fe0b249ac3ee2c2adb089d4', class: "visually-hidden", "aria-live": "polite", "aria-atomic": "true" }, this.removalAnnouncement), this.helperMessage && !(this.errorMessage && this.errorMessage.length > 0) && (h("p", { key: '7a576cc360d15e0ec38aeb4c0665a7308e7b1506', class: "pds-multiselect__helper", id: messageId(this.componentId, 'helper') }, this.helperMessage)), this.errorMessage && (h("p", { key: '7dadb8425fa729316867a6d9ddb49d2553d82308', class: "pds-multiselect__error", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: 'fc295c5b5110b009a1d6372411c1faf32df9b620', icon: danger, size: "small" }), this.errorMessage)), h("div", { key: '173c9f6953442fdedfdfa71264bcc3781b827701', style: { display: 'none' } }, h("slot", { key: 'e31cb390048516ee400d2875ad993cd6ae07b146' })))));
     }
     static get is() { return "pds-multiselect"; }
     static get encapsulation() { return "shadow"; }

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

@@ -554,7 +554,7 @@ export class PdsPopover {
         }, 16); // ~1 frame at 60fps
     }
     render() {
-        return (h(Host, { key: '2e19ac35068ac25b013bd146da0b3b343eb89d75', id: this.componentId }, h("span", { key: 'e982ade010dc6539593759704e5afae29ce5eba8', class: "pds-popover__trigger-wrapper" }, h("slot", { key: 'f1e1ef5e3b0b52a96cb566175ea420e1d1545ccc', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), h("div", { key: 'caa5762029db6430f174c8936611fe332889620d', class: "pds-popover__content-slot-wrapper" }, h("slot", { key: 'cdad839643d1a5a2024cd55cdd33750f8665a366', onSlotchange: this.handleContentSlotChange }))));
+        return (h(Host, { key: 'f488756aeac4d7d1223b5ccda953aa6ea54788c0', id: this.componentId }, h("span", { key: '9ac844192c4389c1e9dc8548bda70b45c14b9aed', class: "pds-popover__trigger-wrapper" }, h("slot", { key: '5263c5e659fc51f912bdbf92c119dc2bb1f57d4f', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), h("div", { key: '717d438131ff0bff69f11513c538bf3de5c2d1a4', class: "pds-popover__content-slot-wrapper" }, h("slot", { key: '060d737af3edd0d7baf5d556867122ca217d13a2', onSlotchange: this.handleContentSlotChange }))));
     }
     static get is() { return "pds-popover"; }
     static get encapsulation() { return "shadow"; }

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

@@ -18,7 +18,7 @@ export class PdsProgress {
         this.showPercent = false;
     }
     render() {
-        return (h(Host, { key: '23b8b17a11e6537d1f73cd435c66e779267c6909', class: this.animated ? { 'is-animated': this.animated } : '' }, h("div", { key: '6bf201015c284f26b2bb794237aef8d4e4d532ee', class: "pds-progress" }, h("label", { key: '7e144a90c1fde70e58095bda2e23b250529a8114', class: "pds-progress__label", htmlFor: this.componentId }, this.label), h("progress", { key: 'ebf00485c3c7523e184fcc022e2bcc325a13458f', id: this.componentId, max: "100", style: this.fillColor ? { '--color-progress-fill': this.fillColor } : {}, value: this.percent })), this.showPercent && h("div", { key: '6f37bd88ccb9228b0d0ca4d934a2d3cff0026533', class: "pds-progress__percentage" }, this.percent, "%")));
+        return (h(Host, { key: '6cb8c8cacf41c0a51907a32cf92d15dea4b4493f', class: this.animated ? { 'is-animated': this.animated } : '' }, h("div", { key: 'e5ad49e7b9328c2234350e3263595112b22b2ff7', class: "pds-progress" }, h("label", { key: '30dab7a71ff8c4947e6d9d199c84a2295c7da7d6', class: "pds-progress__label", htmlFor: this.componentId }, this.label), h("progress", { key: '74dec83ce7f68395cfe9c3adc4512e6ffe98a3b4', id: this.componentId, max: "100", style: this.fillColor ? { '--color-progress-fill': this.fillColor } : {}, value: this.percent })), this.showPercent && h("div", { key: 'b44b9c937bc8de75cdd1c90336419b65be4fb1c0', 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: '947e0adfc46ab267b4a5f3e3da5dedcd8ab64d3e', id: this.componentId }, h("pds-box", { key: 'bc6fbd4eaa162a7d9ff6348d74bf15f71e776db6', "align-items": "center", gap: "xs" }, h("pds-icon", { key: '5d703e9afd94761aae842c82c7b5e9223b63b894', icon: this.icon, size: "var(--pine-dimension-sm)", "aria-hidden": "true" }), h("slot", { key: 'e5e02fb21c783f7e4027591e99cd966981babc04' }))));
+        return (h(Host, { key: 'f6ebcf8eec4bbbfe3a8717cf8c5611684d5c8929', id: this.componentId }, h("pds-box", { key: '0c4b9d0154b13da6aa3ee8b04482b5591bfee46f', "align-items": "center", gap: "xs" }, h("pds-icon", { key: '960c0fe6447622133f423b5547f13d7407258cbb', icon: this.icon, size: "var(--pine-dimension-sm)", "aria-hidden": "true" }), h("slot", { key: '367e9265e49712d16576ba0461042e8aa2210e69' }))));
     }
     static get is() { return "pds-property"; }
     static get encapsulation() { return "shadow"; }

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

@@ -92,11 +92,11 @@ export class PdsRadio {
     }
     render() {
         const renderLabelAndMessages = () => [
-            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)),
+            h("label", { htmlFor: this.componentId, key: `${this.componentId}-label` }, h("input", { key: '0c85ea35e55ccb8d0f8ce869f9c3fefe4a143ef7', "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: '3337ad8a86dc975ab2b45e989ab6f2f4bd4af90d', 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: 'd0c120ce21687b550b22546330d647f9876ee4d6', 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: 'c5a3a39cb6ac1afbe9998e77e98e7d46c85a3687', icon: danger, size: "small" }), this.errorMessage))
         ];
-        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())));
+        return (h(Host, { key: 'e19f3967280820155c8cd14bafc32959f6a78c99', class: this.classNames() }, this.hasImage() && (h("div", { key: 'e990c72656ba7687c43c12c774b547f469213d44', class: "pds-radio__image-container", part: "image-container" }, h("slot", { key: '360e92eb7490bf79ac63ff0580dae76ab660d437', 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

@@ -160,13 +160,13 @@ export class PdsRadioGroup {
     render() {
         const gapValue = this.getGapValue();
         const ariaDescribedBy = this.getAriaDescribedBy();
-        return (h(Host, { key: '0f6b6ddc2af79fc470c050ed6b5588640fe0d7b6', class: this.classNames(), id: this._groupId, role: "group", "aria-describedby": ariaDescribedBy, style: {
+        return (h(Host, { key: 'c8e0b5e7fce3becca58c99d1d8d56bd25db8f2fb', class: this.classNames(), id: this._groupId, role: "group", "aria-describedby": ariaDescribedBy, style: {
                 '--pds-radio-group-gap': gapValue,
-            } }, this.groupLabel && (h("div", { key: '77dbdc4801c3ff50fa3ea6a84d3d6aa51702ad02', class: "pds-radio-group__label" }, this.groupLabel)), h("div", { key: 'c8d7f6aebc39f72a57f353ac2f8677139ac77e71', class: {
+            } }, this.groupLabel && (h("div", { key: '04d9d3154d1c34b58fb46429417b5b75da3ee96a', class: "pds-radio-group__label" }, this.groupLabel)), h("div", { key: '58b1e3c7ff2ed9b2eceab6be6c0a4903919915d5', 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: '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))));
+            } }, h("slot", { key: '357104f35d9845b0717fa6aa896dc8bd60035b34', onSlotchange: () => this.updateChildRadios() })), this.helperMessage && (h("div", { key: 'd05cc6733b4c087d59a9c8ab5e4664ab278ae020', class: "pds-radio-group__message", id: messageId(this._groupId, 'helper') }, this.helperMessage)), this.errorMessage && (h("div", { key: '298396cb986b169d6c0d728863cd13d8399cafbf', class: "pds-radio-group__message pds-radio-group__message--error", id: messageId(this._groupId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: 'fa820d6a8531600c889d18cdcdb93e3588a26865', 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

@@ -55,7 +55,7 @@ export class PdsRow {
         })), (this.minHeight && {
             'min-height': this.minHeight,
         }));
-        return h(Host, { key: '7d99184153a86e5d7d2c90fce98e05e9c4a36b81', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
+        return h(Host, { key: '13417071d1d3411e0bfe0de638c017ee96b1002f', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
     }
     static get is() { return "pds-row"; }
     static get originalStyleUrls() {

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

@@ -228,7 +228,7 @@ export class PdsSelect {
     }
     render() {
         const hasAction = this.el.querySelector('[slot="action"]') !== null;
-        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 }))));
+        return (h(Host, { key: 'a1d08dc93decbf50f95152d59ceac4ad38dd5b01', "aria-disabled": this.disabled ? 'true' : null, class: this.classNames(), "has-action": hasAction && !this.hideLabel ? 'true' : null }, h("div", { key: '8aaeeea02f9330c013084dd525499e80ac19c463', class: "pds-select" }, !this.hideLabel && (h("div", { key: 'e8a6b8885eb95b68eb7229fe6bf67da4d1be1875', class: "pds-select__label-wrapper" }, h("label", { key: 'e6c6d190b14b49aa5c07a5b13e486bee4499cf60', htmlFor: this.componentId }, h("span", { key: 'e703a2d392f6f6f8dead73d91eb9f1d55b8a51c1', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), hasAction && this.renderAction())), h("select", { key: '61573ecc714d416e4cad4e5307b9bcc4a1b7e190', "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: 'acbd13e28aaca1cac0bcc2b9269083c50104bfc0', "aria-hidden": "true", class: "hidden", ref: (el) => (this.slotContainer = el) }, h("slot", { key: '6f3f4cf1cb3cd71dcefdb149df68aea905b8b5eb', onSlotchange: this.handleSlotChange })), this.renderMessages(), !this.multiple && h("pds-icon", { key: 'a3b2301d28bd6631cd33286ae3b93c67294e4cc6', "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

@@ -38,7 +38,7 @@ export class PdsSortableItem {
         }
     }
     render() {
-        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" })))));
+        return (h(Host, { key: '18cf8345abe65e492b09add621df93c9eac77d30', class: "pds-sortable-item", id: this.componentId }, this.showHandle && (h("div", { key: 'a9545fad581a44740da59ae64209da530c91fc97', class: "pds-sortable-item__handle" }, h("pds-icon", { key: '4d0ecd4ec0ee6c0aa5249c060098d7748a05b910', "aria-hidden": "true", icon: handleIcon }))), h("slot", { key: 'f79fcb490cb435e578c3d6ff2ce4b8dcd4040555' }), this.enableActions && (h("div", { key: 'eac4084b1bc7e6c0e1026ec9fea2b3a9e33ac618', class: "pds-sortable-item__actions" }, h("slot", { key: '8f77cd2e46a7ed2d442f04747c2ef6b726912ad9', 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

@@ -57,7 +57,7 @@ export class PdsSortable {
         this.sortableInstance = Sortable.create(this.el, sortableOptions);
     }
     render() {
-        return (h(Host, { key: '562bfb1ecea0b3a3f246b2e277b71f70d14b854c', class: this.classNames(), id: this.componentId }, h("slot", { key: 'a1ff894a9cd6049e532d2fa744429cec6d97e280' })));
+        return (h(Host, { key: '7c5c1c00c00f8e7122c292f83f33b0b5638a4617', class: this.classNames(), id: this.componentId }, h("slot", { key: 'c418a9e41ff37672d886259c3c8a060507b2a16a' })));
     }
     static get is() { return "pds-sortable"; }
     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: '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)));
+        return (h(Host, { key: '3b15b1f098a56bed7f5ab95a549a0ca1cb3444b3', class: this.switchClassNames(), "aria-disabled": this.disabled ? 'true' : null }, h("label", { key: 'f0a6a95ead6b8b11122c5153402fbe68e1382cb4', htmlFor: this.componentId }, h("input", Object.assign({ key: '7633dce93d0983f31492cca51f238d2e321d3316', "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: '3b0b1a38d4a0cee505bd0f1c7383af259e2da2b0', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), this.helperMessage &&
+            h("div", { key: 'e6770c0fed9f7a8a626e91cd8aa84b8623bd4b32', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            h("div", { key: '88cb91dc6cf056b0af35a1821c839166217a9eb4', class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '6faf4e7b7e13193c147769d9308fb4d23425aa9c', 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: '457fc5406a1fe67055038398e03bfad97a393747', role: "rowgroup", part: "body" }, h("slot", { key: '5950bced36f7ba590f34173149cf8663ba76103b' })));
+        return (h(Host, { key: 'bd4c84fdefd61afbd4138488b04419d62021c1ad', role: "rowgroup", part: "body" }, h("slot", { key: 'a16c0cfc807969c005b743293144e4f7470fe851' })));
     }
     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: 'b108b0fce3ff0d5c503922a6c936ffd6ca52523f', class: this.classNames(), role: "gridcell", part: "cell", tabIndex: this.truncate ? 0 : undefined, style: this.tableRef &&
+        return (h(Host, { key: '1b20d85c75e5ca772f1c6fb402d06ef0f6b170a7', class: this.classNames(), role: "gridcell", part: "cell", tabIndex: this.truncate ? 0 : undefined, style: this.tableRef &&
                 this.tableRef.fixedColumn &&
                 this.tableRef.selectable
                 ? { '--fixed-cell-position': '40px' }
-                : {} }, h("slot", { key: 'ebc1709ef52029bc6afec2fa89a90d47620892cb' })));
+                : {} }, h("slot", { key: '3d1dc98bc9e3dead532af0c5c79305eaedee62be' })));
     }
     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: 'd5d5906bdb23794b911ecd5904a4cc58aa5380d6', role: "row", part: "head" }, this.tableRef && this.tableRef.selectable && (h("pds-table-head-cell", { key: '85df57fb4371e4fba855e16ce62c8329b49e08cf', part: this.tableRef.selectable ? 'checkbox-cell' : '' }, !this.tableRef.disableSelectAll && (h("pds-checkbox", { key: '92bd5565463e29d249d1ac71d9dc0d000f3eea79', 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: '494dc0395da229a264c38540479f36967601cc26' })));
+        return (h(Host, { key: '972440cfae0388fb28018929bcf79330cfc5f4d5', role: "row", part: "head" }, this.tableRef && this.tableRef.selectable && (h("pds-table-head-cell", { key: '13080928a925352bd35318bb5871d2ad3041d616', part: this.tableRef.selectable ? 'checkbox-cell' : '' }, !this.tableRef.disableSelectAll && (h("pds-checkbox", { key: '57e7872a8620a2a7a295f2bc5354bfbe75541eba', 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: 'e1d459755b5db56bbbbbaf69f40ed994d1604b83' })));
     }
     static get is() { return "pds-table-head"; }
     static get encapsulation() { return "shadow"; }