@pine-ds/core 3.23.0 → 3.24.0

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

@@ -0,0 +1,112 @@
+import { Host, h } from "@stencil/core";
+const NAMED_SIZES = new Set(['sm', 'md', 'lg', 'xl', 'full']);
+/**
+ * @part container - The inner semantic container element
+ */
+export class PdsContainer {
+    constructor() {
+        /**
+         * Sets the semantic HTML tag rendered as the inner container element.
+         * @default 'div'
+         */
+        this.tag = 'div';
+        /**
+         * If `true`, the container is centered horizontally using `margin-inline: auto`.
+         * @default true
+         */
+        this.centered = true;
+    }
+    render() {
+        const Tag = this.tag;
+        const isNamed = this.size !== undefined && NAMED_SIZES.has(this.size);
+        const customSize = this.size !== undefined && !isNamed ? this.size : undefined;
+        const hostStyle = {};
+        if (customSize)
+            hostStyle['--pine-container-max-width'] = customSize;
+        if (!this.centered)
+            hostStyle['margin-inline'] = '0';
+        return (h(Host, { key: 'b8055b9add2e9abfeaf61f233a0f22e559829eb2', class: { [`pds-container--${this.size}`]: isNamed }, style: Object.keys(hostStyle).length ? hostStyle : undefined }, h(Tag, { key: '8aac62d1a6639063d10b8c51539ca0bc3ca0bae4', part: "container" }, h("slot", { key: '747e55553b7660159ee9d0192ccb8ed29a99f0b0' }))));
+    }
+    static get is() { return "pds-container"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pds-container.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pds-container.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the maximum width of the container. Accepts a named size token\n(`'sm'` | `'md'` | `'lg'` | `'xl'` | `'full'`) or any valid CSS length value (e.g. `'640px'`, `'50rem'`).\nWhen omitted, no max-width is applied."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size"
+            },
+            "tag": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'div' | 'main' | 'section' | 'article'",
+                    "resolved": "\"article\" | \"div\" | \"main\" | \"section\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'div'"
+                        }],
+                    "text": "Sets the semantic HTML tag rendered as the inner container element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tag",
+                "defaultValue": "'div'"
+            },
+            "centered": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "true"
+                        }],
+                    "text": "If `true`, the container is centered horizontally using `margin-inline: auto`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "centered",
+                "defaultValue": "true"
+            }
+        };
+    }
+}
+//# sourceMappingURL=pds-container.js.map

package/dist/collection/components/pds-container/pds-container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pds-container.js","sourceRoot":"","sources":["../../../../src/components/pds-container/pds-container.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD,MAAM,WAAW,GAAG,IAAI,GAAG,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC;AAE9D;;GAEG;AAMH,MAAM,OAAO,YAAY;IALzB;QAaE;;;WAGG;QACK,QAAG,GAA2C,KAAK,CAAC;QAE5D;;;WAGG;QACK,aAAQ,GAAY,IAAI,CAAC;KAsBlC;IApBC,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC;QACrB,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACtE,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC;QAE/E,MAAM,SAAS,GAA2B,EAAE,CAAC;QAC7C,IAAI,UAAU;YAAE,SAAS,CAAC,4BAA4B,CAAC,GAAG,UAAU,CAAC;QACrE,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,SAAS,CAAC,eAAe,CAAC,GAAG,GAAG,CAAC;QAErD,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE,EAAE,CAAC,kBAAkB,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,EACnD,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC,CAAE,SAAiB,CAAC,CAAC,CAAC,SAAS;YAErE,EAAC,GAAG,qDAAC,IAAI,EAAC,WAAW;gBACnB,8DAAQ,CACJ,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\n\nconst NAMED_SIZES = new Set(['sm', 'md', 'lg', 'xl', 'full']);\n\n/**\n * @part container - The inner semantic container element\n */\n@Component({\n  tag: 'pds-container',\n  styleUrl: 'pds-container.scss',\n  shadow: true,\n})\nexport class PdsContainer {\n  /**\n   * Sets the maximum width of the container. Accepts a named size token\n   * (`'sm'` | `'md'` | `'lg'` | `'xl'` | `'full'`) or any valid CSS length value (e.g. `'640px'`, `'50rem'`).\n   * When omitted, no max-width is applied.\n   */\n  @Prop() size?: string;\n\n  /**\n   * Sets the semantic HTML tag rendered as the inner container element.\n   * @default 'div'\n   */\n  @Prop() tag: 'div' | 'main' | 'section' | 'article' = 'div';\n\n  /**\n   * If `true`, the container is centered horizontally using `margin-inline: auto`.\n   * @default true\n   */\n  @Prop() centered: boolean = true;\n\n  render() {\n    const Tag = this.tag;\n    const isNamed = this.size !== undefined && NAMED_SIZES.has(this.size);\n    const customSize = this.size !== undefined && !isNamed ? this.size : undefined;\n\n    const hostStyle: Record<string, string> = {};\n    if (customSize) hostStyle['--pine-container-max-width'] = customSize;\n    if (!this.centered) hostStyle['margin-inline'] = '0';\n\n    return (\n      <Host\n        class={{ [`pds-container--${this.size}`]: isNamed }}\n        style={Object.keys(hostStyle).length ? (hostStyle as any) : undefined}\n      >\n        <Tag part=\"container\">\n          <slot />\n        </Tag>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,89 @@
+import { html } from 'lit';
+
+export default {
+  component: 'pds-container',
+  title: 'components/Layout/Container',
+}
+
+const BaseTemplate = (args) => html`
+<pds-container
+  ${args.size ? `size="${args.size}"` : ''}
+  tag="${args.tag}"
+  centered="${args.centered}"
+>
+  ${args.slot}
+</pds-container>`;
+
+export const Default = BaseTemplate.bind();
+Default.args = {
+  slot: html`<pds-box background-color="secondary" padding="md"><pds-text tag="p">No max-width applied — container grows to fill its parent.</pds-text></pds-box>`,
+  tag: 'div',
+  centered: true,
+};
+
+export const Sm = BaseTemplate.bind();
+Sm.args = {
+  size: 'sm',
+  tag: 'div',
+  centered: true,
+  slot: html`<pds-box background-color="secondary" padding="md"><pds-text tag="p">sm — 340px max-width. Narrow forms, confirmations.</pds-text></pds-box>`,
+};
+
+export const Md = BaseTemplate.bind();
+Md.args = {
+  size: 'md',
+  tag: 'div',
+  centered: true,
+  slot: html`<pds-box background-color="secondary" padding="md"><pds-text tag="p">md — 520px max-width. Standard forms, settings panels.</pds-text></pds-box>`,
+};
+
+export const Lg = BaseTemplate.bind();
+Lg.args = {
+  size: 'lg',
+  tag: 'div',
+  centered: true,
+  slot: html`<pds-box background-color="secondary" padding="md"><pds-text tag="p">lg — 700px max-width. Wide panels, content pages.</pds-text></pds-box>`,
+};
+
+export const Xl = BaseTemplate.bind();
+Xl.args = {
+  size: 'xl',
+  tag: 'div',
+  centered: true,
+  slot: html`<pds-box background-color="secondary" padding="md"><pds-text tag="p">xl — 1064px max-width. Page-level wrappers.</pds-text></pds-box>`,
+};
+
+export const Full = BaseTemplate.bind();
+Full.args = {
+  size: 'full',
+  tag: 'div',
+  centered: true,
+  slot: html`<pds-box background-color="secondary" padding="md"><pds-text tag="p">full — 1440px max-width. Max-width site container.</pds-text></pds-box>`,
+};
+
+export const ArbitrarySize = BaseTemplate.bind();
+ArbitrarySize.args = {
+  size: '640px',
+  tag: 'div',
+  centered: true,
+  slot: html`<pds-box background-color="secondary" padding="md"><pds-text tag="p">Arbitrary size — 640px passed directly as a CSS length.</pds-text></pds-box>`,
+};
+
+export const NotCentered = BaseTemplate.bind();
+NotCentered.args = {
+  size: 'md',
+  tag: 'div',
+  centered: false,
+  slot: html`<pds-box background-color="secondary" padding="md"><pds-text tag="p">centered=false — aligned to the start of its container.</pds-text></pds-box>`,
+};
+
+export const SemanticTag = (args) => html`
+<pds-container size="${args.size}" tag="main">
+  <pds-box direction="column" background-color="secondary" padding="md">
+    <pds-text tag="h1">Page title</pds-text>
+    <pds-text tag="p">Using tag="main" as the inner container element.</pds-text>
+  </pds-box>
+</pds-container>`;
+SemanticTag.args = {
+  size: 'lg',
+};

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

@@ -86,7 +86,7 @@ export class PdsCopytext {
         return classNames.join(' ');
     }
     render() {
-        return (h(Host, { key: '782932e4b45129ffc8e55852060bdf0104563e2f', class: this.classNames(), id: this.componentId }, h("pds-button", { key: '87c8cd8bfc2bd6fb4f5e2f1e72f48b98ca05116b', type: "button", variant: "unstyled", onClick: this.handleClick }, h("span", { key: '02bb0538feebdd008c5ae7329c9bbf575920eef9', ref: (el) => this.valueSpanEl = el }, this.value), h("pds-icon", { key: 'e21547ada488242583549b3f4431b6c652752365', icon: copyIcon, size: "16px" }))));
+        return (h(Host, { key: '43a3870fa4c24416e2e6e99dd7c423a5c32ac91e', class: this.classNames(), id: this.componentId }, h("pds-button", { key: 'f0735d3f245dd7150e88b3dd1a191c3ee86b6293', type: "button", variant: "unstyled", onClick: this.handleClick }, h("span", { key: 'ddf7cf205f9bb11dd4b4111435bb7efc15b0af61', ref: (el) => this.valueSpanEl = el }, this.value), h("pds-icon", { key: '0f35d997eb1766631ac6098bdb12d0aff9813012', icon: copyIcon, size: "16px" }))));
     }
     static get is() { return "pds-copytext"; }
     static get encapsulation() { return "shadow"; }

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

@@ -19,7 +19,7 @@ export class PdsDivider {
         return classNames.join(' ');
     }
     render() {
-        return (h(Host, { key: 'ff38715a9610e1812c2f9fc948c4f19bc1266b3c', id: this.componentId }, h("hr", { key: 'd67a971d8be8f1739066013213787cf50a06319f', class: this.classNames() })));
+        return (h(Host, { key: 'c3a01882db1119b8397353aaed193813cba0bfb8', id: this.componentId }, h("hr", { key: 'fe20a28dbd2f10cec125df4dbb4ba7a2837628f1', class: this.classNames() })));
     }
     static get is() { return "pds-divider"; }
     static get encapsulation() { return "shadow"; }

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: 'f580ec794a1e06c5384ac88ba935515f28a3e0f9', 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: '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()));
     }
     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: 'a8480ce2974db190161dab43a7af75520019d5d1', id: this.componentId }, h("hr", { key: 'a8296c39676d4270f8519ce59af85dcde35586ec' })));
+        return (h(Host, { key: '1058ea61d2ad7c311ee162b909df2531f3589e4c', id: this.componentId }, h("hr", { key: 'a8c2f69ef5fba5ea4ea74553fe72544e31eafb1b' })));
     }
     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: '36db1447aedd341d0692a63b7ade9d4b6a2ce915', id: this.componentId }, h("slot", { key: '6e66d5227b9432a2c4721f9278b15cb6d85c0dda', name: "trigger", onSlotchange: this.handleTriggerSlotChange }), h("pds-box", { key: '4376cc05df741766135ad3f64c48949a7768c977', "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: '10e185fcdad6cb38abb6317b302ff457e4cc77e3', onSlotchange: this.handleSlotChange }))));
+        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 }))));
     }
     static get is() { return "pds-dropdown-menu"; }
     static get encapsulation() { return "shadow"; }

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

@@ -481,7 +481,7 @@ export class PdsFilter {
         return null;
     }
     render() {
-        return (h(Host, { key: '490e62f7906de343b3944be884321007172e6b66', id: this.componentId }, h("button", { key: '060673c00c7b8043fb1ce52d6eeb79fb663c560f', 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: '1a307b1f1e0fded0fe3fa934e20e62998fc82c82', class: "pds-filter__button-content", part: "button-content" }, this.renderIcon(), this.text && (h("span", { key: '11a7ff15dfb2cd13f9d4a75255881dda260e88d2', class: "pds-filter__button-text", part: "button-text" }, this.text)), this.renderDropdownIcon())), this.variant !== 'clear' && (h("div", { key: 'bde162f9cf0d0a69debe7adb2e7261d8713806c0', ref: el => this.popoverEl = el, id: `${this.componentId}-popover`, class: "pds-filter__popover", popover: "auto", part: "popover" }, h("slot", { key: '9d41d268bdeab03d6e875a4a6bf322a40b50536b' })))));
+        return (h(Host, { key: 'e70f7bf3612c5c8abe7445ba3a4e53391a68de9e', id: this.componentId }, h("button", { key: '2cba723795c43509762f75cb4b6607ce547f7c39', 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: '8244dd35cc74c6f0138be2d3495d94b97f60474f', class: "pds-filter__button-content", part: "button-content" }, this.renderIcon(), this.text && (h("span", { key: 'd97c085d1df1ca13ccaf1f26ca2dac81bdfb105a', class: "pds-filter__button-text", part: "button-text" }, this.text)), this.renderDropdownIcon())), this.variant !== 'clear' && (h("div", { key: '0b9daf4591ea20db06813ce4c39442d69af3fda1', ref: el => this.popoverEl = el, id: `${this.componentId}-popover`, class: "pds-filter__popover", popover: "auto", part: "popover" }, h("slot", { key: 'f4499fe2d5a6a169318fe65cbbc558565c8644f9' })))));
     }
     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: '2b5ed6a2d395f77f2ccc82f09cc197e055206cbd', id: this.componentId }, h("div", { key: '8458c2a1cbdf872c2a2d51ca9fbb971528abb951', class: "pds-filters" }, h("slot", { key: '732105a40f10ec5b2a4ea596ad840d13575e1760' }))));
+        return (h(Host, { key: '7007a635d3866781dfd67bd2d3b2dab46d36cffc', id: this.componentId }, h("div", { key: 'e6eb4c76bfb39050aaa01ad297df995de7df484b', class: "pds-filters" }, h("slot", { key: '543c83c7422b3e1e9a2446618fe8119d76478df4' }))));
     }
     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: '7ec6d6855757a2c0c9352f61e9eda7b3d6560eb7', class: {
+        return (h(Host, { key: 'fa205f03d5c378d27a66cbfd520ae2bc7ab9e9df', class: {
                 'pds-image': true,
-            }, id: this.componentId }, h("img", { key: 'a22c91e0560dc85d603022975aa8f71b2406e34d', 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: '8d03dddf6e924ef8aebea2bf34a32e326bee329a', 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,7 +286,7 @@ export class PdsInput {
             'has-prepend': this.hasPrepend,
             'has-append': this.hasAppend,
         };
-        return (h(Host, { key: '2d3ea3af8894fbf4b454d08928e26946722a5b4d', "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: 'fb01fe320faa3cce646d6b54435e4e12da38cf07', class: "pds-input" }, label && (h("div", { key: '3ed35d66308e2c8d38bcedccd6b0f739872ae45e', class: "pds-input__label-wrapper" }, h("label", { key: 'd82f20db4527a790ed6801a9de225e6eebe6d8b5', htmlFor: componentId, class: "pds-input__label" }, h("span", { key: '5ad15bcb3d8ae37f9a62c4cb56a5159e3c754592', class: this.hideLabel ? 'visually-hidden' : '' }, label, this.required && h("span", { key: '034d94201f2720374b1e40e9258def810ea228a0', class: "pds-input__required-indicator" }, " *"))), !this.hideLabel && this.renderAction())), h("div", { key: 'ad6129ba1817039c163d574b3246bca929ebf978', class: inputWrapperClasses }, this.renderPrepend(), this.renderPrefix(), h("input", Object.assign({ key: '92806f252756f9ca56dfed69f34e8e599b459261', ref: (input) => (this.nativeInput = input), class: "pds-input__field", "aria-describedby": assignDescription(componentId, invalid, helperMessage), "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: 'a7bfdb402e433815f7520cb1a9154abf33366f4e', class: "pds-input__helper-message", id: messageId(componentId, 'helper') }, helperMessage)), errorMessage && (h("p", { key: 'fb7d5892e2b9b636a8441128e77436eea9429746', class: "pds-input__error-message", id: messageId(componentId, 'error') }, h("pds-icon", { key: '5fa138752a9473272a2ae8f15db8707d07638986', icon: danger, size: "small" }), errorMessage)))));
+        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: 'cc804ec7ec9bb1e588863bdb636f2cc9d61108e0', class: "pds-input__label-wrapper" }, h("label", { key: 'c6d8e54070422bb9856978d17dc99e6633e98e23', htmlFor: componentId, class: "pds-input__label" }, h("span", { key: 'beee330abe246af7e256c42237d061b1e3ed34fe', class: this.hideLabel ? 'visually-hidden' : '' }, label, this.required && h("span", { key: 'd4b6792646b18514f9c5ab008467ebd8e009efa8', class: "pds-input__required-indicator" }, " *"))), !this.hideLabel && this.renderAction())), h("div", { key: '0c147663fad34fc1fd3b294dbe93dc0618f32664', class: inputWrapperClasses }, this.renderPrepend(), this.renderPrefix(), h("input", Object.assign({ key: 'fcf07f3facc9494a9422ac5a54bbcd1dc083ce28', ref: (input) => (this.nativeInput = input), class: "pds-input__field", "aria-describedby": assignDescription(componentId, invalid, helperMessage), "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: 'dbed2e91b2431beaf630460b5d042f4aa7532665', class: "pds-input__helper-message", id: messageId(componentId, 'helper') }, helperMessage)), errorMessage && (h("p", { key: 'ad14be8e2280b58742486cddba591355ed7d3df6', class: "pds-input__error-message", id: messageId(componentId, 'error') }, h("pds-icon", { key: '0badd7b84d29e826f3ca9bd1ad108823c24e3996', 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

@@ -49,8 +49,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: 'c593ea2b55716a74678666aca7fa470bfa330461', class: this.classNames(), download: this.download, href: this.href, id: this.componentId, part: "link", target: targetValue, rel: relValue, style: this.setLinkStyles() }, h("slot", { key: 'fed9931e87ed95bd21669c7130c8918165c14268' }, this.href), showExternalIcon &&
-            h("pds-icon", { key: '6c7528674ce5ebc54d6f7de6c499acce1f144ad5', icon: launch, size: this.fontSize })));
+        return (h("a", { key: '8ab68ceb91a4c7b155a4ae54d2cb421af4d0eec1', class: this.classNames(), download: this.download, href: this.href, id: this.componentId, part: "link", target: targetValue, rel: relValue, style: this.setLinkStyles() }, h("slot", { key: 'b90dc967867a3b765d632c16458236e6e4ccf97e' }, this.href), showExternalIcon &&
+            h("pds-icon", { key: 'ebffdba1a21f7b0f5730608ec5eb88519ee79d1b', 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: '2e5d99368f9bd7cfb2538bac7d692a24e4d68d28', 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: 'd7f19e0a958ff7c1d8660d2953a52d312e997b96', class: "pds-loader--spinner" }, h("svg", { key: '5466e9962d446fd72d0c2aaafe23f2777701a14b', style: this.getSvgStyle(), viewBox: "0 0 200 200", fill: "none", part: "loader-svg" }, h("defs", { key: '98f48ae144302815a664d023740c2235401b2eea' }, h("linearGradient", { key: 'f20f259b01bce14659b18f31b8df220080d71c1e', id: "spinner-secondHalf" }, h("stop", { key: 'dfdf8dfb28fcde737fd735f64eec4aef7d81720a', offset: "0%", "stop-opacity": "0", "stop-color": "currentColor" }), h("stop", { key: 'cec59a32faa2763d39e0a14b92c42a1f6f8ae42b', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" })), h("linearGradient", { key: 'ce5b7cafdb77f025a6b6accd198f217ca6b57fb7', id: "spinner-firstHalf" }, h("stop", { key: '4673e0ae636ab5efedb5072b1b72953f6e4d3361', offset: "0%", "stop-opacity": "1", "stop-color": "currentColor" }), h("stop", { key: 'd162a037043f8fab180c740a128c79170d135567', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" }))), h("g", { key: 'bf40b165d28ec48dbc87a7ed8a612c64768a9a64', class: "pds-loader__spinner-path" }, h("path", { key: 'ef3d785b614b3f5ce56aa6ea830b8d3a97681e94', stroke: "url(#spinner-secondHalf)", d: "M 4 100 A 96 96 0 0 1 196 100" }), h("path", { key: '325fdf3fd39ea5a3a78720ae6ec28f787a83635d', stroke: "url(#spinner-firstHalf)", d: "M 196 100 A 96 96 0 0 1 4 100" }), h("path", { key: '54aacdbe457bc81ceaf24f3f8b69d2ddad50c1f0', stroke: "currentColor", "stroke-linecap": "round", d: "M 4 100 A 96 96 0 0 1 4 98" }))))), this.variant === 'typing' && (h("div", { key: '6c3e7d46a75a0393f2851a57ba245b480d855bf4', class: "pds-loader--typing" }, h("span", { key: '4910de2c7c51e25e6c738521122cc24634916829' }), h("span", { key: '71252eb90437cfff9d85d06ac2c7c233e8986037' }), h("span", { key: 'ba1b08887da6a476cc1fa0c5cb4e07d4a88e62f1' }))), h("div", { key: 'e8cc5e9cd5b092c9deb0aa566b1f76ab3d6413b6', class: `pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}` }, h("slot", { key: '725804cab3306daa27e70510b5a11946063c3b84', name: "label" }, "Loading..."))));
+        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..."))));
     }
     static get is() { return "pds-loader"; }
     static get encapsulation() { return "shadow"; }

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

@@ -173,10 +173,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: '7da94c2c06a773fd5634c58481d856fda63246f9' }, h("div", { key: '9e4c6ec64bf18fdd117e51c21de87a9a8175f99c', class: {
+        return (h(Host, { key: 'fae42c1fc151e4855cd2c731802c15851473be79' }, h("div", { key: 'feb61d6a7227d8113b931df6280358cd9b4fe583', class: {
                 'pds-modal-content': true,
                 [`pds-modal-content--border-${this.border}`]: true
-            }, style: styleObj, tabindex: "-1" }, h("slot", { key: 'dbfa4f683ba8832662ed10a7fe2f89f353484593' }))));
+            }, style: styleObj, tabindex: "-1" }, h("slot", { key: '1c9e55ecd1ad353699e5a4590ee04c9005719f6d' }))));
     }
     static get is() { return "pds-modal-content"; }
     static get originalStyleUrls() {

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

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class PdsModalFooter {
     render() {
-        return (h("footer", { key: 'd7297c60bccc1d3e9cca3b2eb8bbefdc71ac2375', class: "pds-modal__footer" }, h("slot", { key: 'e807b2a702525e1c30f051ee23f1b25518248ff0' })));
+        return (h("footer", { key: '0fa58ce225ce31a1f40d6ce1d3276e716b36de8d', class: "pds-modal__footer" }, h("slot", { key: 'df0bbdb56c711c7eb34db7181f940de11d4449ef' })));
     }
     static get is() { return "pds-modal-footer"; }
     static get originalStyleUrls() {

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

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class PdsModalHeader {
     render() {
-        return (h("header", { key: '78ac9253a737c94deaaa03157fdb0ba6c6e53ad4', class: "pds-modal__header" }, h("slot", { key: '0593ae721aeee01272b64d9cd7ccc317180ff386' })));
+        return (h("header", { key: '1a471bd6dfa2b654f5a6ebdf8fb5baef728324b3', class: "pds-modal__header" }, h("slot", { key: '946a365ab3c2ca627d618188890d385c054b4c16' })));
     }
     static get is() { return "pds-modal-header"; }
     static get originalStyleUrls() {

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

@@ -233,14 +233,14 @@ export class PdsModal {
         return thisZIndex === maxZIndex;
     }
     render() {
-        return (h("dialog", { key: '357b1570ff9153bb04abc883bd471d0454eca862', class: {
+        return (h("dialog", { key: 'cf2710a889d8f0e80a3551088ab38a88dc44ad1e', class: {
                 'pds-modal__backdrop': true,
                 'open': this.open
-            }, "aria-modal": "true", "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick }, h("div", { key: '89576c6aa19ffd87dfc3b527a242503093af4ec3', class: {
+            }, "aria-modal": "true", "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick }, h("div", { key: 'a06d017153e67ad38bc1ced56ba22aeade977aaf', class: {
                 'pds-modal': true,
                 [`pds-modal--${this.size}`]: true,
                 'pds-modal--scrollable': this.scrollable
-            }, part: "modal" }, h("slot", { key: '071ad7101f66fb01854191436ec95a212ea6ee73' }))));
+            }, part: "modal" }, h("slot", { key: 'd995c586809a4940c091912244a86cb4605a961c' }))));
     }
     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: 'a9af87a2a7f3372c8ead8895f843e940fb660df6', class: backdropClasses }, h("div", { key: '16e645db5bf6cab63426ee487a9a3c697e40d735', class: modalClasses, role: "dialog", "aria-modal": "true", "aria-labelledby": this.componentId ? `${this.componentId}-heading` : null, part: "modal" }, h("div", { key: '9910f078afa449794c3ea0c038f89b8ce86fa710', class: "pds-modal__header" }, h("slot", { key: '7678643a9a73ef4809d0b09926b6b2d487bab212', name: "header" })), h("div", { key: '1ef5dd8e0fe4e5b0cd3538423ca4fa2011110d9e', class: "pds-modal-content" }, h("slot", { key: '3cde3240571bdeda56fc39904a45baa1c0ae09f1' })), h("div", { key: 'ff9aa1820a4084ccfd0115a9f42894e875e1cdcb', class: "pds-modal__footer" }, h("slot", { key: 'ce497a94226973b12c74cbbceb175d7d478ba971', name: "footer" })))));
+        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" })))));
     }
     static get is() { return "mock-pds-modal"; }
     static get originalStyleUrls() {

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

@@ -942,10 +942,10 @@ export class PdsMultiselect {
     }
     render() {
         const hasSelections = this.selectedItems.length > 0;
-        return (h(Host, { key: '50f06d8e7a23c17ff0169048d220aa78e4e60d91', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: 'f85448744cf889fd999579fe2849fd7902254e3d', class: "pds-multiselect", onFocusout: this.handleContainerFocusOut }, this.label && (h("label", { key: '54143c890e3fea07626705fab5b87d0da2abf485', id: `${this.componentId}-label`, htmlFor: this.componentId, class: {
+        return (h(Host, { key: '086b6d2d199b35110e64ba1da3c12f1a81360581', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: 'c2faf217a97de056a9111a78e7077025e4ab5ee1', class: "pds-multiselect", onFocusout: this.handleContainerFocusOut }, this.label && (h("label", { key: '0aff86a3a0054aef256bac5c0204dd914a9bd3ae', id: `${this.componentId}-label`, htmlFor: this.componentId, class: {
                 'pds-multiselect__label': true,
                 'visually-hidden': this.hideLabel,
-            } }, this.label)), h("div", { key: 'ad35b02bcf540a5fd197d8012cb060d10682b0a2', 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: '3b92119871dc32bb3c9a559be816bdece2fc30a6', 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,
@@ -961,7 +961,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.errorMessage || this.helperMessage), "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: '547ab819abb5193040ddf71d725bf97fc3cb80b6', class: "visually-hidden", "aria-live": "polite", "aria-atomic": "true" }, this.removalAnnouncement), this.helperMessage && !(this.errorMessage && this.errorMessage.length > 0) && (h("p", { key: '063fadcda29637c338ed8ab49ef95c57750ff7ba', class: "pds-multiselect__helper", id: messageId(this.componentId, 'helper') }, this.helperMessage)), this.errorMessage && (h("p", { key: '6aabb3cd4b8334f87a4eecc38ba43ff4980fb8af', class: "pds-multiselect__error", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: '6fa6e1eeb8625a90e149a46a1d49742979b37881', icon: danger, size: "small" }), this.errorMessage)), h("div", { key: '0a84dfe166c5cc0f93840825e238d3f7baf932e4', style: { display: 'none' } }, h("slot", { key: 'a4e97c2063b358aca5db8dd6ccb8a8d860c26a4a' })))));
+            } }, this.getTriggerText()), h("pds-icon", { class: "pds-multiselect__icon", icon: enlarge }))), this.renderDropdown()), this.selectedDisplay === 'pill' && this.pillPosition === 'below' && this.renderBelowPills(), h("span", { key: '07d6a6bf9ccc2fe8bfcf9502a1cd4b7abf5c5e6f', class: "visually-hidden", "aria-live": "polite", "aria-atomic": "true" }, this.removalAnnouncement), this.helperMessage && !(this.errorMessage && this.errorMessage.length > 0) && (h("p", { key: 'a94bb6f31805d31ec3cd5b5f2ca8b1984f4d41d1', class: "pds-multiselect__helper", id: messageId(this.componentId, 'helper') }, this.helperMessage)), this.errorMessage && (h("p", { key: '15afc6b9313e1fe22bd56b00eee1ebcf9e085c2e', class: "pds-multiselect__error", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: '452814577b14ca8f891b101903bd1a7a7e5d8bb1', icon: danger, size: "small" }), this.errorMessage)), h("div", { key: 'd8ce787886e666303759cd2654c78b44269a40ff', style: { display: 'none' } }, h("slot", { key: '8295376fb03b23d44c5baeca9bc967514e433e0f' })))));
     }
     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: 'd312e00194a5d296119964bb6ba5e5cd9c6fb825', id: this.componentId }, h("span", { key: '4b57221f1c1c824f02ecf4ac0d032ae4b6b0e138', class: "pds-popover__trigger-wrapper" }, h("slot", { key: 'b0f3e0f1839c651047f1a096738b2a41296dccea', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), h("div", { key: 'a06b4503b5ce9f15186bc517bd0a867171546e9b', class: "pds-popover__content-slot-wrapper" }, h("slot", { key: '9377f9b88c194c517c4630e67d85bc1574dfb1e8', onSlotchange: this.handleContentSlotChange }))));
+        return (h(Host, { key: '835196832cb0dcec61f0bc6e5f4df08038335d5a', id: this.componentId }, h("span", { key: 'e4aadaa17ce565e00f5e038a92aae8957b22be64', class: "pds-popover__trigger-wrapper" }, h("slot", { key: '97fe58bed551bed9f3159faa430ef54fd09d2412', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), h("div", { key: '8d1330a58ff77182100fb40afa78ee89ccd3146f', class: "pds-popover__content-slot-wrapper" }, h("slot", { key: '5d1136682ba7bff4a4c904fb8310443e9feb9e5b', 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: '8f1f16b8ef5269affbb07a00731775b1740b865d', class: this.animated ? { 'is-animated': this.animated } : '' }, h("div", { key: '2e7a7d679953150523367357eeefea3e8ebc7349', class: "pds-progress" }, h("label", { key: '67b2aef063ace81ceabf8c66a5039ee2ffd2d041', class: "pds-progress__label", htmlFor: this.componentId }, this.label), h("progress", { key: '759351c283ae43848e2ee3c298ae27de1e9b58db', id: this.componentId, max: "100", style: this.fillColor ? { '--color-progress-fill': this.fillColor } : {}, value: this.percent })), this.showPercent && h("div", { key: '5f2e7309fe5207785a69c93df4e877182dc37f67', class: "pds-progress__percentage" }, this.percent, "%")));
+        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, "%")));
     }
     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: '3bcfbe6d24bd61cabddf12bf674cf3aecf77c353', id: this.componentId }, h("pds-box", { key: '189d28c1025a9825b35034f9726a3f15d40d9cb3', "align-items": "center", gap: "xs" }, h("pds-icon", { key: '456413d57cf086bdf21f7693b208906ca25d1166', icon: this.icon, size: "var(--pine-dimension-sm)", "aria-hidden": "true" }), h("slot", { key: 'c5eaefd892ce4f29ff7938783acdcfc4a5494632' }))));
+        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' }))));
     }
     static get is() { return "pds-property"; }
     static get encapsulation() { return "shadow"; }

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

@@ -80,11 +80,11 @@ export class PdsRadio {
     }
     render() {
         const renderLabelAndMessages = () => [
-            h("label", { htmlFor: this.componentId, key: `${this.componentId}-label` }, h("input", { key: '9d5e14d349c2328a3a374bdf2e09fd70409f2350', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, type: "radio", id: this.componentId, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleRadioChange, class: this.hasImage() ? 'visually-hidden' : '' }), h("span", { key: '88a3dcfd25892e6ddba621deab94e349ec75739e', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)),
+            h("label", { htmlFor: this.componentId, key: `${this.componentId}-label` }, h("input", { key: '75aca490be2db050f66ddd9cb45ce122bea4db53', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, type: "radio", id: this.componentId, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleRadioChange, class: this.hasImage() ? 'visually-hidden' : '' }), h("span", { key: '1bbc7398d3be35e301526b0f842274a3f1db4457', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)),
             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: '0056232c82cf0d09db6b845e05d951954582ccc1', 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: 'e1a1228fa52e68623098f09493d93aa03d2e65c4', icon: danger, size: "small" }), this.errorMessage))
         ];
-        return (h(Host, { key: '3748a4cb1365b3deeb98d5294352d2a12546372c', class: this.classNames() }, this.hasImage() && (h("div", { key: '2eefe091ac70c9cb147b7ed102c524aefc13691f', class: "pds-radio__image-container", part: "image-container" }, h("slot", { key: '58ad9ed18ada05e2ba9267332c73b28ab055ccb7', name: "image", onSlotchange: () => (this._hasImage = this.hasImageSlot()) }))), this.hasImage() ? (h("div", { class: "pds-radio__content-wrapper" }, renderLabelAndMessages())) : (renderLabelAndMessages())));
+        return (h(Host, { key: '60fabeef5778fd30e46cfd23d05684e1743bc57f', class: this.classNames() }, this.hasImage() && (h("div", { key: '9ba3e60182a68cc8e996623cf46e17001ff451f6', class: "pds-radio__image-container", part: "image-container" }, h("slot", { key: 'bf8927129eb68ee7ed07a1f8f8727f013254e133', name: "image", onSlotchange: () => (this._hasImage = this.hasImageSlot()) }))), this.hasImage() ? (h("div", { class: "pds-radio__content-wrapper" }, renderLabelAndMessages())) : (renderLabelAndMessages())));
     }
     static get is() { return "pds-radio"; }
     static get encapsulation() { return "scoped"; }

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

@@ -144,13 +144,13 @@ export class PdsRadioGroup {
     render() {
         const gapValue = this.getGapValue();
         const ariaDescribedBy = this.getAriaDescribedBy();
-        return (h(Host, { key: '14e4da42fa14f79d3baae62fc4759462fb00cec8', class: this.classNames(), id: this._groupId, role: "group", "aria-describedby": ariaDescribedBy, style: {
+        return (h(Host, { key: '53949e8e878887189482a13e0402402b8ee79c46', class: this.classNames(), id: this._groupId, role: "group", "aria-describedby": ariaDescribedBy, style: {
                 '--pds-radio-group-gap': gapValue,
-            } }, this.groupLabel && (h("div", { key: '0564bc27ff5d15ad7f3ad37d737ee9be8216cfbf', class: "pds-radio-group__label" }, this.groupLabel)), h("div", { key: '72dcfa6dc3b9e6f8837a380575da213d026fdaca', class: {
+            } }, this.groupLabel && (h("div", { key: '9aa547ff0b60d1eb78ab6806c552391c119c6511', class: "pds-radio-group__label" }, this.groupLabel)), h("div", { key: '5bad4f6d4c685eca8a97b574511f21b93bdf4821', 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: '98a1251c95ff936e8da1c1838f69ed98be15ae60', onSlotchange: () => this.updateChildRadios() })), this.helperMessage && (h("div", { key: '3667b47f8b0f42058f16135bb51943055705d415', class: "pds-radio-group__message", id: messageId(this._groupId, 'helper') }, this.helperMessage)), this.errorMessage && (h("div", { key: '1fe7dafd6ed81b74114c6b8901ec70b6527f1c00', class: "pds-radio-group__message pds-radio-group__message--error", id: messageId(this._groupId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: 'c8e5099b271ad88836758cbd8baa911a720ceb5a', icon: danger, size: "small" }), this.errorMessage))));
+            } }, h("slot", { key: 'ffd76f30b308f124e1df925b2fe354ffb80f59bc', onSlotchange: () => this.updateChildRadios() })), this.helperMessage && (h("div", { key: 'ea8995384b1e1c1e98d01d704bd969a97bfd2b2a', class: "pds-radio-group__message", id: messageId(this._groupId, 'helper') }, this.helperMessage)), this.errorMessage && (h("div", { key: '30726bc368c7ad2820ae4cb43faf0a45e94a51e8', class: "pds-radio-group__message pds-radio-group__message--error", id: messageId(this._groupId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: 'acc00b6e36ead10cc5cc01033ad0f619bd75f5da', icon: danger, size: "small" }), this.errorMessage))));
     }
     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: '837ddbdce43bb90e52421dac32f77a0fc80f8d07', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
+        return h(Host, { key: '7d99184153a86e5d7d2c90fce98e05e9c4a36b81', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
     }
     static get is() { return "pds-row"; }
     static get originalStyleUrls() {

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

@@ -223,7 +223,7 @@ export class PdsSelect {
     }
     render() {
         const hasAction = this.el.querySelector('[slot="action"]') !== null;
-        return (h(Host, { key: 'ef2484adb6e3091a6f55ed462b81e431580951c8', "aria-disabled": this.disabled ? 'true' : null, class: this.classNames(), "has-action": hasAction && !this.hideLabel ? 'true' : null }, h("div", { key: '6de51120bac23144c0c727fbcfeef73b542ba750', class: "pds-select" }, !this.hideLabel && (h("div", { key: '6e36271c09c160e2930eb1c4bcbd5b5dc7a3de6c', class: "pds-select__label-wrapper" }, h("label", { key: '6a1d061a3ea1a01c58e412c59369eda7c2b771bd', htmlFor: this.componentId }, h("span", { key: 'c32a97fc1167f15074f44ca3e1f4f410e3cc88a6', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), hasAction && this.renderAction())), h("select", { key: '77d63c6ea36a1132c4b642724aea6fd25db0355a', "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: '71d8b7155c6b97396826c6769de4a2045727d43b', "aria-hidden": "true", class: "hidden", ref: (el) => (this.slotContainer = el) }, h("slot", { key: '8153aee437a68c53ef9e38ddc009985296e80ed2', onSlotchange: this.handleSlotChange })), this.renderMessages(), !this.multiple && h("pds-icon", { key: '435d67dfdce140fd5cc1b1d9d47bccf73be97def', class: "pds-select__select-icon", icon: enlarge }))));
+        return (h(Host, { key: '28292440973cbb60c63a296415a617e05fc9c5ce', "aria-disabled": this.disabled ? 'true' : null, class: this.classNames(), "has-action": hasAction && !this.hideLabel ? 'true' : null }, h("div", { key: '4a0f255ecc75c9fcedfc933c0a728d26918d9a9c', class: "pds-select" }, !this.hideLabel && (h("div", { key: '1f0b2a9ccf4ce2b79d5bb4dd40ff076b415bc6ac', class: "pds-select__label-wrapper" }, h("label", { key: '9e30b1b0266981f73f0821c05e833cb66a3caf3c', htmlFor: this.componentId }, h("span", { key: '7790be41907be6c5e3b460aa84b7ea54773cc14d', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), hasAction && this.renderAction())), h("select", { key: 'd66b39ee412bfbf3c6dfff722cb061f24ba82df6', "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: 'daf4846494666ebade54249c8d925423e71e7d33', "aria-hidden": "true", class: "hidden", ref: (el) => (this.slotContainer = el) }, h("slot", { key: '545f421fd2679d4bb6ee34658f7dd4089ece4f81', onSlotchange: this.handleSlotChange })), this.renderMessages(), !this.multiple && h("pds-icon", { key: '0b3bcd3ceee6e6b2ab24b52f16f6cbd89ae88322', 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

@@ -25,7 +25,7 @@ export class PdsSortableItem {
         }
     }
     render() {
-        return (h(Host, { key: '99cd4e5a8a48c524569a8380b2cf214096627928', class: "pds-sortable-item", id: this.componentId }, this.showHandle && (h("div", { key: '4507fcd9135439cc12a95890f82a4355ee1c2487', class: "pds-sortable-item__handle" }, h("pds-icon", { key: '42b4c87bd56d40c625016c7c09bcf9696b1be829', icon: handleIcon }))), h("slot", { key: '47a7d6b1bc399e3044eee9f669d40cf9c24faf76' }), this.enableActions && (h("div", { key: 'a617251b75698f53f90c260e55cee260e44e1a8c', class: "pds-sortable-item__actions" }, h("slot", { key: '74b891acaa77245d37f39a37586365185dc3de1d', name: "sortable-item-actions" })))));
+        return (h(Host, { key: '631a0c1150226256cdb47d1a7bc6635144bb56d0', class: "pds-sortable-item", id: this.componentId }, this.showHandle && (h("div", { key: 'bdb6ff779a5d750b75d404521bc91cad02176ea8', class: "pds-sortable-item__handle" }, h("pds-icon", { key: '144f4b6fe33a3a3a864ac48041fc93935fbf99c3', icon: handleIcon }))), h("slot", { key: 'cdddce9c5fa3fde34481c41c46c5f6504e33a358' }), this.enableActions && (h("div", { key: '527e1d22f20223a850dbd956dea4db93878fd9f9', class: "pds-sortable-item__actions" }, h("slot", { key: '85ea35dbfdf0393721471dd229e80e9e57f58230', 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: '2b3845733aa8acd1de1d9c49b3840320fbc87dd4', class: this.classNames(), id: this.componentId }, h("slot", { key: 'd8659231eab11d8a4b89f6f3404268ca1d1c7dca' })));
+        return (h(Host, { key: '562bfb1ecea0b3a3f246b2e277b71f70d14b854c', class: this.classNames(), id: this.componentId }, h("slot", { key: 'a1ff894a9cd6049e532d2fa744429cec6d97e280' })));
     }
     static get is() { return "pds-sortable"; }
     static get encapsulation() { return "scoped"; }