@pine-ds/core 2.16.4 → 2.17.0

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

@@ -3,6 +3,8 @@ import { hasShadowDom } from "../../utils/utils";
 import { caretDown } from "@pine-ds/icons/icons";
 /**
  * @part button - Exposes the button element for styling.
+ * @part button-content - Exposes the button content for styling.
+ * @part button-text - Exposes the button text for styling.
  * @part caret - Exposes the caret icon component for styling. Appears only on the disclosure variant.
  * @part icon - Exposes the icon component for styling.
 */
@@ -13,7 +15,7 @@ export class PdsButton {
                 ev.preventDefault();
                 return;
             }
-            if (this.type != 'button') {
+            if (!this.href && this.type != 'button') {
                 // If button clicked IS NOT associated with a form
                 if (hasShadowDom(this.el)) {
                     const form = this.el.closest('form');
@@ -33,11 +35,14 @@ export class PdsButton {
         this.componentId = undefined;
         this.disabled = false;
         this.fullWidth = false;
+        this.href = undefined;
         this.icon = null;
+        this.iconOnly = false;
         this.loading = false;
         this.name = undefined;
-        this.value = undefined;
+        this.target = undefined;
         this.type = 'button';
+        this.value = undefined;
         this.variant = 'primary';
     }
     classNames() {
@@ -45,16 +50,33 @@ export class PdsButton {
         if (this.variant) {
             classNames.push('pds-button--' + this.variant);
         }
+        if (this.iconOnly) {
+            classNames.push('pds-button--icon-only');
+        }
         if (this.loading) {
             classNames.push('pds-button--loading');
         }
         return classNames.join(' ');
     }
     render() {
-        return (h(Host, { key: '6b9f3c286fe8e74703d482df6ae49e770a26d3f4', "aria-disabled": this.disabled ? 'true' : null, id: this.componentId, onClick: this.handleClick, variant: this.variant }, h("button", { key: 'ba8f5ce2e101875de773d4967dc7e4e61e0d6e1b', "aria-busy": this.loading ? 'true' : null, "aria-live": this.loading ? 'polite' : null, class: this.classNames(), disabled: this.disabled, name: this.name, part: "button", type: this.type, value: this.value }, h("div", { key: 'fdb0c43a4688a271ac5f4c261c12891a1b798e78', class: "pds-button__content" }, this.icon && this.variant !== 'disclosure' &&
-            h("pds-icon", { key: '37e212a7f08f0734cc53644fd776667c70aa7fc5', class: this.loading ? 'pds-button__icon--hidden' : '', name: this.icon, part: "icon" }), h("span", { key: 'a7969b2c2cd18ab615d5070428050d513bb659b8', class: `pds-button__text ${this.loading ? 'pds-button__text--hidden' : ''}` }, h("slot", { key: 'a0d2a610c2b4dfc2d5fdf1acb715b002a1927aa6' })), this.loading &&
-            h("span", { key: 'f889c60c94baf9c8c73b31de76482e09515c2cf0', class: "pds-button__loader" }, h("pds-loader", { key: '372ff4bc2f3dd3a75015d341f41689b07bd237e0', "is-loading": true, size: "var(--pine-font-size-body-2xl)", variant: "spinner" }, "Loading...")), this.variant === 'disclosure' &&
-            h("pds-icon", { key: 'd0e0f35a0b44f69138bf9a78989cf1a5bbdec135', class: this.loading ? 'pds-button__icon--hidden' : '', icon: caretDown, part: "caret" })))));
+        // Common props for both button and anchor elements
+        const commonProps = {
+            class: this.classNames(),
+            part: 'button',
+        };
+        const attributes = () => {
+            if (this.href) {
+                return Object.assign(Object.assign({}, commonProps), { href: this.disabled ? null : this.href, target: this.target });
+            }
+            return Object.assign(Object.assign({}, commonProps), { 'aria-busy': this.loading ? 'true' : null, 'aria-live': this.loading ? 'polite' : null, 'disabled': this.disabled, 'name': this.name, 'type': this.type, 'value': this.value });
+        };
+        const ContentElement = this.href ? 'a' : 'button';
+        // Hide text when loading or iconOnly is true
+        const hideText = this.loading || this.iconOnly;
+        const content = (h("div", { class: "pds-button__content", part: "button-content" }, this.icon && this.variant !== 'disclosure' &&
+            h("pds-icon", { class: this.loading ? 'pds-button__icon--hidden' : '', name: this.icon, part: "icon", "aria-hidden": "true" }), h("span", { class: `pds-button__text ${hideText ? 'pds-button__text--hidden' : ''}`, part: "button-text" }, h("slot", null)), this.loading && (h("span", { class: "pds-button__loader" }, h("pds-loader", { "is-loading": true, size: "var(--pine-font-size-body-2xl)", variant: "spinner" }, "Loading..."))), this.variant === 'disclosure' &&
+            h("pds-icon", { class: this.loading ? 'pds-button__icon--hidden' : '', icon: caretDown, part: "caret", "aria-hidden": "true" })));
+        return (h(Host, { "aria-disabled": this.disabled ? 'true' : null, id: this.componentId, onClick: this.handleClick, variant: this.variant }, h(ContentElement, Object.assign({}, attributes()), content)));
     }
     static get is() { return "pds-button"; }
     static get encapsulation() { return "shadow"; }
@@ -129,6 +151,23 @@ export class PdsButton {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If provided, renders the component as an anchor (`<a>`) element instead of a button.\nWhen using href, button-specific props (type, name, value, loading) will be ignored."
+                },
+                "attribute": "href",
+                "reflect": false
+            },
             "icon": {
                 "type": "string",
                 "mutable": false,
@@ -144,12 +183,30 @@ export class PdsButton {
                             "name": "defaultValue",
                             "text": "null"
                         }],
-                    "text": "Displays an icon before the text when\nthe icon string matches an icon name."
+                    "text": "Displays an icon in the button."
                 },
                 "attribute": "icon",
                 "reflect": false,
                 "defaultValue": "null"
             },
+            "iconOnly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "When true, displays only the icon and visually hides the text (keeping it accessible)."
+                },
+                "attribute": "icon-only",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "loading": {
                 "type": "boolean",
                 "mutable": false,
@@ -188,21 +245,21 @@ export class PdsButton {
                 "attribute": "name",
                 "reflect": false
             },
-            "value": {
+            "target": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "'_blank' | '_self' | '_parent' | '_top'",
+                    "resolved": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Provides button with a submittable value"
+                    "text": "Specifies where to open the linked document when href is provided.\nOnly applies when href is set."
                 },
-                "attribute": "value",
+                "attribute": "target",
                 "reflect": false
             },
             "type": {
@@ -226,6 +283,23 @@ export class PdsButton {
                 "reflect": false,
                 "defaultValue": "'button'"
             },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Provides button with a submittable value"
+                },
+                "attribute": "value",
+                "reflect": false
+            },
             "variant": {
                 "type": "string",
                 "mutable": false,

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

@@ -1 +1 @@
-{"version":3,"file":"pds-button.js","sourceRoot":"","sources":["../../../src/components/pds-button/pds-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, h, Prop } from '@stencil/core';\nimport { hasShadowDom } from '../../utils/utils';\n\nimport { caretDown } from '@pine-ds/icons/icons';\n\n/**\n * @part button - Exposes the button element for styling.\n * @part caret - Exposes the caret icon component for styling. Appears only on the disclosure variant.\n * @part icon - Exposes the icon component for styling.\n*/\n\n@Component({\n  tag: 'pds-button',\n  styleUrls: ['pds-button.scss'],\n  shadow: true,\n})\nexport class PdsButton {\n  @Element() el: HTMLPdsButtonElement;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines the button's disabled state.\n   * @defaultValue false\n   */\n  @Prop() disabled? = false;\n\n  /**\n   * Determines if the button should take up the full width of its container.\n   * @defaultValue false\n   */\n  @Prop() fullWidth? = false;\n\n  /**\n   * Displays an icon before the text when\n   * the icon string matches an icon name.\n   * @defaultValue null\n   */\n  @Prop() icon?: string = null;\n\n  /**\n   * Determines if the button is in a loading state.\n   * When true, displays a loader and hides the button text.\n   * @defaultValue false\n   */\n  @Prop() loading? = false;\n\n  /**\n   * Provides the button with a submittable name.\n   */\n  @Prop() name?: string;\n\n  /**\n   * Provides button with a submittable value\n   */\n  @Prop() value?: string;\n\n  /**\n   * Provides button with a type.\n   * @defaultValue button\n   */\n  @Prop() type?: 'button' | 'reset' | 'submit' = 'button';\n\n  /**\n   * Sets the style variant of the button.\n   * @defaultValue primary\n   */\n  @Prop() variant: 'primary' | 'secondary' | 'accent' | 'disclosure' | 'destructive' | 'unstyled' = 'primary';\n\n  @Event() pdsClick: EventEmitter;\n\n  private handleClick = (ev: Event) => {\n    if (this.loading) {\n      ev.preventDefault();\n      return;\n    }\n\n    if (this.type != 'button') {\n      // If button clicked IS NOT associated with a form\n      if (hasShadowDom(this.el)) {\n        const form = this.el.closest('form')\n        if (form) {\n          ev.preventDefault()\n\n          const fakeButton = document.createElement('button')\n          fakeButton.type = this.type\n          fakeButton.style.display = 'none'\n          form.appendChild(fakeButton)\n          fakeButton.click()\n          fakeButton.remove()\n        }\n      }\n    }\n    this.pdsClick.emit(ev);\n  }\n\n  private classNames() {\n    const classNames = ['pds-button'];\n\n    if (this.variant) {\n      classNames.push('pds-button--' + this.variant);\n    }\n\n    if (this.loading) {\n      classNames.push('pds-button--loading');\n    }\n\n    return classNames.join(' ');\n  }\n\n  render() {\n    return (\n      <Host\n        aria-disabled={this.disabled ? 'true' : null}\n        id={this.componentId}\n        onClick={this.handleClick}\n        variant={this.variant}\n      >\n        <button\n          aria-busy={this.loading ? 'true' : null}\n          aria-live={this.loading ? 'polite' : null}\n          class={this.classNames()}\n          disabled={this.disabled}\n          name={this.name}\n          part=\"button\"\n          type={this.type}\n          value={this.value}\n        >\n          <div class=\"pds-button__content\">\n            {this.icon && this.variant !== 'disclosure' &&\n              <pds-icon\n                class={this.loading ? 'pds-button__icon--hidden' : ''}\n                name={this.icon}\n                part=\"icon\"\n              ></pds-icon>\n            }\n\n            <span class={`pds-button__text ${this.loading ? 'pds-button__text--hidden' : ''}`}>\n              <slot />\n            </span>\n\n            {this.loading &&\n              <span class=\"pds-button__loader\">\n                <pds-loader\n                  is-loading={true}\n                  size=\"var(--pine-font-size-body-2xl)\"\n                  variant=\"spinner\"\n                >\n                  Loading...\n                </pds-loader>\n              </span>\n            }\n\n            {this.variant === 'disclosure' &&\n              <pds-icon\n                class={this.loading ? 'pds-button__icon--hidden' : ''}\n                icon={caretDown}\n                part=\"caret\"\n              ></pds-icon>\n            }\n          </div>\n        </button>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pds-button.js","sourceRoot":"","sources":["../../../src/components/pds-button/pds-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, h, Prop } from '@stencil/core';\nimport { hasShadowDom } from '../../utils/utils';\n\nimport { caretDown } from '@pine-ds/icons/icons';\n\n/**\n * @part button - Exposes the button element for styling.\n * @part button-content - Exposes the button content for styling.\n * @part button-text - Exposes the button text for styling.\n * @part caret - Exposes the caret icon component for styling. Appears only on the disclosure variant.\n * @part icon - Exposes the icon component for styling.\n*/\n\n@Component({\n  tag: 'pds-button',\n  styleUrls: ['pds-button.scss'],\n  shadow: true,\n})\nexport class PdsButton {\n  @Element() el: HTMLPdsButtonElement;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines the button's disabled state.\n   * @defaultValue false\n   */\n  @Prop() disabled? = false;\n\n  /**\n   * Determines if the button should take up the full width of its container.\n   * @defaultValue false\n   */\n  @Prop() fullWidth? = false;\n\n  /**\n   * If provided, renders the component as an anchor (`<a>`) element instead of a button.\n   * When using href, button-specific props (type, name, value, loading) will be ignored.\n   */\n  @Prop() href?: string;\n\n  /**\n   * Displays an icon in the button.\n   * @defaultValue null\n   */\n  @Prop() icon?: string = null;\n\n  /**\n   * When true, displays only the icon and visually hides the text (keeping it accessible).\n   */\n  @Prop() iconOnly? = false;\n\n  /**\n   * Determines if the button is in a loading state.\n   * When true, displays a loader and hides the button text.\n   * @defaultValue false\n   */\n  @Prop() loading? = false;\n\n  /**\n   * Provides the button with a submittable name.\n   */\n  @Prop() name?: string;\n\n  /**\n   * Specifies where to open the linked document when href is provided.\n   * Only applies when href is set.\n   */\n  @Prop() target?: '_blank' | '_self' | '_parent' | '_top';\n\n  /**\n   * Provides button with a type.\n   * @defaultValue button\n   */\n  @Prop() type?: 'button' | 'reset' | 'submit' = 'button';\n\n  /**\n   * Provides button with a submittable value\n   */\n  @Prop() value?: string;\n\n  /**\n   * Sets the style variant of the button.\n   * @defaultValue primary\n   */\n  @Prop() variant: 'primary' | 'secondary' | 'accent' | 'disclosure' | 'destructive' | 'unstyled' = 'primary';\n\n  @Event() pdsClick: EventEmitter;\n\n  private handleClick = (ev: Event) => {\n    if (this.loading) {\n      ev.preventDefault();\n      return;\n    }\n\n    if (!this.href && this.type != 'button') {\n      // If button clicked IS NOT associated with a form\n      if (hasShadowDom(this.el)) {\n        const form = this.el.closest('form');\n        if (form) {\n          ev.preventDefault();\n\n          const fakeButton = document.createElement('button');\n          fakeButton.type = this.type;\n          fakeButton.style.display = 'none';\n          form.appendChild(fakeButton);\n          fakeButton.click();\n          fakeButton.remove();\n        }\n      }\n    }\n    this.pdsClick.emit(ev);\n  };\n\n  private classNames() {\n    const classNames = ['pds-button'];\n\n    if (this.variant) {\n      classNames.push('pds-button--' + this.variant);\n    }\n\n    if (this.iconOnly) {\n      classNames.push('pds-button--icon-only');\n    }\n\n    if (this.loading) {\n      classNames.push('pds-button--loading');\n    }\n\n    return classNames.join(' ');\n  }\n\n  render() {\n    // Common props for both button and anchor elements\n    const commonProps = {\n      class: this.classNames(),\n      part: 'button',\n    };\n\n    const attributes = () => {\n      if (this.href) {\n        return {\n          // Anchor element props\n          ...commonProps,\n          href: this.disabled ? null : this.href,\n          target: this.target,\n        };\n      }\n\n      return {\n        // Button element props\n        ...commonProps,\n        'aria-busy': this.loading ? 'true' : null,\n        'aria-live': this.loading ? 'polite' : null,\n        'disabled': this.disabled,\n        'name': this.name,\n        'type': this.type,\n        'value': this.value,\n      };\n    };\n\n    const ContentElement = this.href ? 'a' : 'button';\n\n    // Hide text when loading or iconOnly is true\n    const hideText = this.loading || this.iconOnly;\n\n    const content = (\n      <div class=\"pds-button__content\" part=\"button-content\">\n        {this.icon && this.variant !== 'disclosure' &&\n          <pds-icon class={this.loading ? 'pds-button__icon--hidden' : ''} name={this.icon} part=\"icon\" aria-hidden=\"true\"></pds-icon>\n        }\n\n        <span class={`pds-button__text ${hideText ? 'pds-button__text--hidden' : ''}`} part=\"button-text\">\n          <slot />\n        </span>\n\n        {this.loading && (\n          <span class=\"pds-button__loader\">\n            <pds-loader is-loading={true} size=\"var(--pine-font-size-body-2xl)\" variant=\"spinner\">\n              Loading...\n            </pds-loader>\n          </span>\n        )}\n\n        {this.variant === 'disclosure' &&\n          <pds-icon class={this.loading ? 'pds-button__icon--hidden' : ''} icon={caretDown} part=\"caret\" aria-hidden=\"true\"></pds-icon>\n        }\n      </div>\n    );\n\n    return (\n      <Host\n        aria-disabled={this.disabled ? 'true' : null}\n        id={this.componentId}\n        onClick={this.handleClick}\n        variant={this.variant}\n      >\n        <ContentElement {...attributes()}>\n          {content}\n        </ContentElement>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -20,12 +20,16 @@ const BaseTemplate = (args) => html`
     component-id=${args.componentId}
     disabled=${args.disabled}
     full-width=${args.fullWidth}
+    href=${args.href}
+    icon-only=${args.iconOnly}
     icon=${args.icon}
     loading=${args.loading}
     name=${args.name}
+    target=${args.target}
     type=${args.type}
     value=${args.value}
-    variant=${args.variant}>
+    variant=${args.variant}
+  >
       ${args.slot}
     </pds-button> `;
 
@@ -33,16 +37,30 @@ export const Accent = BaseTemplate.bind();
 Accent.args = {
   disabled: false,
   fullWidth: false,
+  iconOnly: false,
   loading: false,
   slot: 'Accent',
   type: 'button',
   variant: 'accent',
 };
 
+export const ButtonLink = BaseTemplate.bind();
+ButtonLink.args = {
+  disabled: false,
+  fullWidth: false,
+  href: 'https://pine-design-system.netlify.app/',
+  iconOnly: false,
+  loading: false,
+  slot: 'Link Button',
+  target: '_blank',
+  variant: 'primary',
+};
+
 export const Destructive = BaseTemplate.bind({});
 Destructive.args = {
   disabled: false,
   fullWidth: false,
+  iconOnly: false,
   loading: false,
   slot: 'Destructive',
   type: 'button',
@@ -53,6 +71,7 @@ export const Disclosure = BaseTemplate.bind({});
 Disclosure.args = {
   disabled: false,
   fullWidth: false,
+  iconOnly: false,
   loading: false,
   slot: 'Disclosure',
   type: 'button',
@@ -68,16 +87,41 @@ export const FullWidth = BaseTemplate.bind({});
 FullWidth.args = {
   disabled: false,
   fullWidth: true,
+  iconOnly: false,
   loading: false,
   slot: 'Full Width',
   type: 'button',
   variant: 'primary'
 }
 
+export const IconOnly = BaseTemplate.bind();
+IconOnly.args = {
+  disabled: false,
+  fullWidth: false,
+  icon: 'favorite',
+  iconOnly: true,
+  loading: false,
+  slot: 'Icon Only',
+  type: 'button',
+  variant: 'secondary',
+};
+
+export const Loading = BaseTemplate.bind({});
+Loading.args = {
+  disabled: false,
+  fullWidth: false,
+  iconOnly: false,
+  loading: true,
+  slot: 'Loading',
+  type: 'button',
+  variant: 'primary',
+}
+
 export const Primary = BaseTemplate.bind({});
 Primary.args = {
   disabled: false,
   fullWidth: false,
+  iconOnly: false,
   loading: false,
   slot: 'Primary',
   type: 'button',
@@ -88,18 +132,9 @@ export const Secondary = BaseTemplate.bind({});
 Secondary.args = {
   disabled: false,
   fullWidth: false,
+  iconOnly: false,
   loading: false,
   slot: 'Secondary',
   type: 'button',
   variant: 'secondary',
 }
-
-export const Loading = BaseTemplate.bind({});
-Loading.args = {
-  disabled: false,
-  fullWidth: false,
-  loading: true,
-  slot: 'Loading',
-  type: 'button',
-  variant: 'primary',
-}

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

@@ -50,9 +50,9 @@ export class PdsCheckbox {
         return classNames.join('  ');
     }
     render() {
-        return (h(Host, { key: 'd552ef5967613280f3399015c17d90d2264bee26', class: this.classNames() }, h("label", { key: '7ed49fd6c942d3765ce5c70048fe53252b532f75', htmlFor: this.componentId }, h("input", { key: 'b1d59fc429e9bd92bd7ff0e4edb79b326416d9fb', type: "checkbox", "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, id: this.componentId, indeterminate: this.indeterminate, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleCheckboxChange, onInput: this.handleInput }), this.label), this.helperMessage &&
-            h("div", { key: '2bf16b8f87910f727e19b2b3a0df5190f80b9c9b', class: 'pds-checkbox__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            h("div", { key: 'dde8ede862aaaf585fe6d1e907b0a78309a59e58', class: `pds-checkbox__message pds-checkbox__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: 'b666e9ccbeb8653271da75cdf81419fbad6028e2', icon: danger, size: "small" }), this.errorMessage)));
+        return (h(Host, { key: '9e2789028b697aa440ff90f44e6899d19403b825', class: this.classNames() }, h("label", { key: '79fdb66797651cc5cf0c7059495df8d7ce61a2af', htmlFor: this.componentId }, h("input", { key: '755975e58732cf844a641faf81f89adc6331c8b8', type: "checkbox", "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, id: this.componentId, indeterminate: this.indeterminate, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleCheckboxChange, onInput: this.handleInput }), h("span", { key: 'ef7401eb659719a2d5dc0d9d5b85e112497e4cf6', class: this.labelHidden ? 'visually-hidden' : '' }, this.label)), this.helperMessage &&
+            h("div", { key: '76a928518577f4b41c6ff38c9fdf5d6a82022a1e', class: 'pds-checkbox__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            h("div", { key: 'd656cc52b4c02bc7f021ff33649a4f0e9b10cb5d', class: `pds-checkbox__message pds-checkbox__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '59fb3ffc4271ef36a5530bdf8db870a99c876fa7', icon: danger, size: "small" }), this.errorMessage)));
     }
     static get is() { return "pds-checkbox"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"pds-checkbox.js","sourceRoot":"","sources":["../../../src/components/pds-checkbox/pds-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Host, Event, EventEmitter, Watch } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { CheckboxChangeEventDetail } from './checkbox-interface';\nimport { danger } from '@pine-ds/icons/icons';\n\n@Component({\n  tag: 'pds-checkbox',\n  styleUrls: ['../../global/styles/utils/label.scss', 'pds-checkbox.scss'],\n  shadow: true,\n})\nexport class PdsCheckbox {\n  /**\n   * It determines whether or not the checkbox is checked.\n   */\n  @Prop({ mutable: true }) checked?: boolean = false;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute and the label `for` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * It determines whether or not the checkbox is disabled.\n   */\n  @Prop() disabled: boolean;\n\n  /**\n   * Displays message text describing an invalid state.\n   */\n  @Prop() errorMessage: string;\n\n  /**\n   * String used for helper message below checkbox.\n   */\n  @Prop() helperMessage: string;\n\n  /**\n   * If `true`, the checkbox will visually appear as indeterminate.\n   * Only JavaScript can set the objects `indeterminate` property. See [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes).\n   */\n  @Prop({ mutable: true }) indeterminate: boolean;\n\n  /**\n   * It determines whether or not the checkbox is invalid.\n   */\n  @Prop() invalid: boolean;\n\n  /**\n   * String used for label text next to checkbox.\n   */\n  @Prop() label: string;\n\n    /**\n   * Visually hides the label text for instances where only the checkbox should be displayed. Label remains accessible to assistive technology such as screen readers.\n   */\n    @Prop() labelHidden: boolean;\n\n  /**\n   * String used for checkbox `name` attribute.\n   */\n  @Prop() name: string;\n\n  /**\n   * It determines whether or not the checkbox is required.\n   */\n  @Prop() required: boolean;\n\n  /**\n   * The value of the checkbox that is submitted with a form.\n   */\n  @Prop() value: string;\n\n  /**\n   * Event emitted that contains the `value` and `checked`.\n   */\n  @Event() pdsCheckboxChange: EventEmitter<CheckboxChangeEventDetail>;\n\n  @Event() pdsCheckboxInput: EventEmitter<CheckboxChangeEventDetail>;\n\n  @Watch('checked')\n  updateIndeterminate() {\n    this.indeterminate = undefined\n  }\n\n  private handleCheckboxChange = (e: Event) => {\n    if (this.disabled) {\n      return;\n    }\n\n    const target = e.target as HTMLInputElement;\n    this.checked = target.checked;\n\n    this.pdsCheckboxChange.emit({\n      checked: target.checked,\n      value: this.value\n    });\n  }\n\n  private handleInput = () => {\n    this.pdsCheckboxInput.emit({\n      checked: this.checked,\n      value: this.value\n    });\n  }\n\n  private classNames() {\n    const classNames = [];\n\n    if (this.invalid) { classNames.push('is-invalid'); }\n    if (this.indeterminate) { classNames.push('is-indeterminate'); }\n    if (this.disabled) { classNames.push('is-disabled'); }\n\n    return classNames.join('  ');\n  }\n\n  render() {\n    return (\n      <Host class={this.classNames()}>\n        <label htmlFor={this.componentId}>\n          <input\n            type=\"checkbox\"\n            aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n            aria-invalid={this.invalid ? \"true\" : undefined}\n            id={this.componentId}\n            indeterminate={this.indeterminate}\n            name={this.name}\n            value={this.value}\n            checked={this.checked}\n            required={this.required}\n            disabled={this.disabled}\n            onChange={this.handleCheckboxChange}\n            onInput={this.handleInput}\n          />\n          {this.label}\n        </label>\n        {this.helperMessage &&\n          <div\n            class={'pds-checkbox__message'}\n            id={messageId(this.componentId, 'helper')}\n          >\n            {this.helperMessage}\n          </div>\n        }\n        {this.errorMessage &&\n          <div\n            class={`pds-checkbox__message pds-checkbox__message--error`}\n            id={messageId(this.componentId, 'error')}\n            aria-live=\"assertive\"\n          >\n            <pds-icon icon={danger} size=\"small\" />\n            {this.errorMessage}\n          </div>\n        }\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pds-checkbox.js","sourceRoot":"","sources":["../../../src/components/pds-checkbox/pds-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Host, Event, EventEmitter, Watch } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { CheckboxChangeEventDetail } from './checkbox-interface';\nimport { danger } from '@pine-ds/icons/icons';\n\n@Component({\n  tag: 'pds-checkbox',\n  styleUrls: ['../../global/styles/utils/label.scss', 'pds-checkbox.scss'],\n  shadow: true,\n})\nexport class PdsCheckbox {\n  /**\n   * It determines whether or not the checkbox is checked.\n   */\n  @Prop({ mutable: true }) checked?: boolean = false;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute and the label `for` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * It determines whether or not the checkbox is disabled.\n   */\n  @Prop() disabled: boolean;\n\n  /**\n   * Displays message text describing an invalid state.\n   */\n  @Prop() errorMessage: string;\n\n  /**\n   * String used for helper message below checkbox.\n   */\n  @Prop() helperMessage: string;\n\n  /**\n   * If `true`, the checkbox will visually appear as indeterminate.\n   * Only JavaScript can set the objects `indeterminate` property. See [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes).\n   */\n  @Prop({ mutable: true }) indeterminate: boolean;\n\n  /**\n   * It determines whether or not the checkbox is invalid.\n   */\n  @Prop() invalid: boolean;\n\n  /**\n   * String used for label text next to checkbox.\n   */\n  @Prop() label: string;\n\n    /**\n   * Visually hides the label text for instances where only the checkbox should be displayed. Label remains accessible to assistive technology such as screen readers.\n   */\n    @Prop() labelHidden: boolean;\n\n  /**\n   * String used for checkbox `name` attribute.\n   */\n  @Prop() name: string;\n\n  /**\n   * It determines whether or not the checkbox is required.\n   */\n  @Prop() required: boolean;\n\n  /**\n   * The value of the checkbox that is submitted with a form.\n   */\n  @Prop() value: string;\n\n  /**\n   * Event emitted that contains the `value` and `checked`.\n   */\n  @Event() pdsCheckboxChange: EventEmitter<CheckboxChangeEventDetail>;\n\n  @Event() pdsCheckboxInput: EventEmitter<CheckboxChangeEventDetail>;\n\n  @Watch('checked')\n  updateIndeterminate() {\n    this.indeterminate = undefined\n  }\n\n  private handleCheckboxChange = (e: Event) => {\n    if (this.disabled) {\n      return;\n    }\n\n    const target = e.target as HTMLInputElement;\n    this.checked = target.checked;\n\n    this.pdsCheckboxChange.emit({\n      checked: target.checked,\n      value: this.value\n    });\n  }\n\n  private handleInput = () => {\n    this.pdsCheckboxInput.emit({\n      checked: this.checked,\n      value: this.value\n    });\n  }\n\n  private classNames() {\n    const classNames = [];\n\n    if (this.invalid) { classNames.push('is-invalid'); }\n    if (this.indeterminate) { classNames.push('is-indeterminate'); }\n    if (this.disabled) { classNames.push('is-disabled'); }\n\n    return classNames.join('  ');\n  }\n\n  render() {\n    return (\n      <Host class={this.classNames()}>\n        <label htmlFor={this.componentId}>\n          <input\n            type=\"checkbox\"\n            aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n            aria-invalid={this.invalid ? \"true\" : undefined}\n            id={this.componentId}\n            indeterminate={this.indeterminate}\n            name={this.name}\n            value={this.value}\n            checked={this.checked}\n            required={this.required}\n            disabled={this.disabled}\n            onChange={this.handleCheckboxChange}\n            onInput={this.handleInput}\n          />\n          <span class={this.labelHidden ? 'visually-hidden' : ''}>\n            {this.label}\n          </span>\n        </label>\n        {this.helperMessage &&\n          <div\n            class={'pds-checkbox__message'}\n            id={messageId(this.componentId, 'helper')}\n          >\n            {this.helperMessage}\n          </div>\n        }\n        {this.errorMessage &&\n          <div\n            class={`pds-checkbox__message pds-checkbox__message--error`}\n            id={messageId(this.componentId, 'error')}\n            aria-live=\"assertive\"\n          >\n            <pds-icon icon={danger} size=\"small\" />\n            {this.errorMessage}\n          </div>\n        }\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -31,7 +31,7 @@ export class PdsChip {
         return chipContent;
     }
     render() {
-        return (h(Host, { key: '91f7d9a87538c4b30b16462061a61fb92812732f', class: this.classNames(), id: this.componentId }, this.setChipContent(), this.variant === 'tag' && (h("button", { key: 'bee8696d3644f33d8630a4ab93ff83c8b1d7ee78', class: "pds-chip__close", type: "button", onClick: this.handleCloseClick, "aria-label": "Remove" }, h("pds-icon", { key: '5a375bf7507f7ac674a6f3c27048e2c218064bb4', icon: remove, size: "12px" })))));
+        return (h(Host, { key: '2306c195a098f23485ec804c95b0be28f3f8862c', class: this.classNames(), id: this.componentId }, this.setChipContent(), this.variant === 'tag' && (h("button", { key: '172aa562017aad775c2350e40c2bbaa8399d7bb4', class: "pds-chip__close", type: "button", onClick: this.handleCloseClick, "aria-label": "Remove" }, h("pds-icon", { key: 'ea6049e3a22903b3efef3b3ef66be1dee711e20b', icon: remove, size: "12px" })))));
     }
     static get is() { return "pds-chip"; }
     static get encapsulation() { return "shadow"; }

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

@@ -38,8 +38,8 @@
 :host(.pds-copytext):host(.pds-copytext--bordered) pds-button {
   padding: var(--pine-dimension-none);
 }
-:host(.pds-copytext):host(.pds-copytext--bordered) pds-button:hover {
-  background: none;
+:host(.pds-copytext):host(.pds-copytext--bordered)::part(button):hover {
+  background-color: transparent;
 }
 :host(.pds-copytext):host(.pds-copytext--bordered) span {
   border: var(--pine-border);
@@ -51,26 +51,23 @@
 :host(.pds-copytext):host(.pds-copytext--bordered) :hover span {
   border: var(--pine-border-hover);
 }
-:host(.pds-copytext):host(.pds-copytext--full-width) {
-  display: flex;
+:host(.pds-copytext):host(.pds-copytext--full-width) pds-button, :host(.pds-copytext):host(.pds-copytext--truncated) pds-button {
+  display: inline-flex;
+  min-width: auto;
   width: 100%;
 }
-:host(.pds-copytext):host(.pds-copytext--full-width) pds-button {
-  display: flex;
-  justify-content: space-between;
+:host(.pds-copytext):host(.pds-copytext--full-width) pds-button::part(button-content), :host(.pds-copytext):host(.pds-copytext--full-width) pds-button::part(button-text), :host(.pds-copytext):host(.pds-copytext--truncated) pds-button::part(button-content), :host(.pds-copytext):host(.pds-copytext--truncated) pds-button::part(button-text) {
+  flex-shrink: 1;
   width: 100%;
 }
-:host(.pds-copytext):host(.pds-copytext--full-width) pds-button span {
+:host(.pds-copytext):host(.pds-copytext--full-width) pds-button span, :host(.pds-copytext):host(.pds-copytext--truncated) pds-button span {
   text-align: left;
   width: 100%;
 }
-:host(.pds-copytext):host(.pds-copytext--truncated) pds-button {
-  display: flex;
-  width: 100%;
+:host(.pds-copytext):host(.pds-copytext--full-width) pds-button {
+  justify-content: space-between;
 }
 :host(.pds-copytext):host(.pds-copytext--truncated) pds-button span {
   overflow: hidden;
-  text-align: left;
   text-overflow: ellipsis;
-  width: 100%;
 }

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

@@ -36,7 +36,7 @@ export class PdsCopytext {
         return classNames.join('  ');
     }
     render() {
-        return (h(Host, { key: '46c38faeba9b70d2e510a4b6af08866577936478', class: this.classNames(), id: this.componentId }, h("pds-button", { key: '6e28c11a9a7a57f4c256b0283b64ec655a897f65', type: "button", variant: "unstyled", onClick: this.handleClick }, h("span", { key: '6818451171f85fd6ad63f07c69871082d3fcba4e' }, this.value), h("pds-icon", { key: '05e683d7b28575d924d6af482e6ce4c3cfee3f05', icon: copyIcon, size: "16px" }))));
+        return (h(Host, { key: '1d8bc5dd4e234f7ae3f1700d4ad58816422ff967', class: this.classNames(), id: this.componentId }, h("pds-button", { key: 'f1c42d6745efe6faff34ac0e538b589e1d709e41', type: "button", variant: "unstyled", onClick: this.handleClick }, h("span", { key: '2ba277f52661fe3852cf07b089b6f0b978f513f9' }, this.value), h("pds-icon", { key: '5730e7ad241b5ff56733db90c3580d1751c8ec4a', icon: copyIcon, size: "16px" }))));
     }
     static get is() { return "pds-copytext"; }
     static get encapsulation() { return "shadow"; }

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

@@ -17,7 +17,7 @@ export class PdsDivider {
         return classNames.join(' ');
     }
     render() {
-        return (h(Host, { key: 'ee48ee45e0463abbd3cb7aa686f8d86928830ccb', id: this.componentId }, h("hr", { key: '4af739f85e502a7d9bff1b3581c283cb6ee53a0e', class: this.classNames() })));
+        return (h(Host, { key: '320aa3a83547a773630fbb1a1d8d9e57d3f54477', id: this.componentId }, h("hr", { key: '1d1b7aaf8c783ecad6a1b5ad91bd258acb21046b', class: this.classNames() })));
     }
     static get is() { return "pds-divider"; }
     static get encapsulation() { return "shadow"; }

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

@@ -8,4 +8,7 @@
 
 img {
   aspect-ratio: var(--dimension-aspect-ratio);
+  display: block;
+  height: auto;
+  max-width: 100%;
 }

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

@@ -11,9 +11,9 @@ export class PdsImage {
         this.width = undefined;
     }
     render() {
-        return (h(Host, { key: '2b5893c36517ee6e30c12a141f19b3f13845db97', class: {
+        return (h(Host, { key: '043894e2963cd548dc165c5d877d217ebc28b1a4', class: {
                 'pds-image': true,
-            }, id: this.componentId }, h("img", { key: '965043cab5ea5c62c52951ec90018bced5bb46e8', 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: '1c0c68d060c938922f0df9d398943d033344a592', 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

@@ -115,10 +115,10 @@ export class PdsInput {
         return classNames.join('  ');
     }
     render() {
-        return (h(Host, { key: 'a823b0086b4c4accc0788813a41b19f8b6ff32e1', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null }, h("div", { key: 'e9b04aaa8e50c987e6010017fbb82bc7b6774d34', class: "pds-input" }, this.label &&
-            h("label", { key: '5c6ddd8b32997344399915929d1ebd9b53c01ec2', class: "pds-input__label", htmlFor: this.componentId }, this.label), h("input", Object.assign({ key: '4bbc00b3ad007fa357ebddccaed0ee5912c464ea', class: this.inputClassNames(), ref: (input) => this.nativeInput = input, "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, autocomplete: this.autocomplete, disabled: this.disabled, id: this.componentId, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, type: this.type, value: this.value, onInput: this.onInputEvent, onChange: this.onChangeEvent, onBlur: this.onBlurEvent, onFocus: this.onFocusEvent, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd }, this.inheritedAttributes)), this.helperMessage &&
-            h("p", { key: 'df6340f0d4ac1271e6a304a2accb312b45c87081', class: "pds-input__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            h("p", { key: '50ecf4b62a9a7215a9b7043031a82b5f3b4f0291', class: "pds-input__error-message", id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '87cfdda13d2756c221e0fc3e448c94fb46bc2eb8', icon: danger, size: "small" }), this.errorMessage))));
+        return (h(Host, { key: '6e4e04c4db43e707c0681e878c1b1f73deee86ae', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null }, h("div", { key: '6610ccb16fb657e6d97aca89b21ff2e2bc0e3fe1', class: "pds-input" }, this.label &&
+            h("label", { key: 'd85cdc84dcd35abcd592e6374e1e3d080f97ab8c', class: "pds-input__label", htmlFor: this.componentId }, this.label), h("input", Object.assign({ key: 'de33a9a5ca6901c9c745fcef9475557cfec1cf91', class: this.inputClassNames(), ref: (input) => this.nativeInput = input, "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, autocomplete: this.autocomplete, disabled: this.disabled, id: this.componentId, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, type: this.type, value: this.value, onInput: this.onInputEvent, onChange: this.onChangeEvent, onBlur: this.onBlurEvent, onFocus: this.onFocusEvent, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd }, this.inheritedAttributes)), this.helperMessage &&
+            h("p", { key: '0721204043319effd9ce7ee3fd42a81570ffbdcc', class: "pds-input__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            h("p", { key: '68e71598657e55cb3ca4ad25a23b673bafe1eefb', class: "pds-input__error-message", id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '9d3969d79ecd3ab4bd2a83ff775409b00f8eb3c9', icon: danger, size: "small" }), this.errorMessage))));
     }
     static get is() { return "pds-input"; }
     static get encapsulation() { return "shadow"; }

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

@@ -23,8 +23,8 @@ export class PdsLink {
         return classNames.join(' ');
     }
     render() {
-        return (h("a", { key: 'ee9b0a9897e2a212989d607c85f2050ee992bd32', class: this.classNames(), href: this.href, id: this.componentId, target: this.external ? '_blank' : undefined, part: "link" }, h("slot", { key: '611a4f9194ce38fd3b79c7e55281a625267846a4' }, this.href), this.external &&
-            h("pds-icon", { key: 'a527d217c8ef1e69a2ca127019fbeb3eb25b3a02', icon: launch, size: this.fontSize })));
+        return (h("a", { key: '7ac75452091305e238c20ef1fc2055fe2f34fb04', class: this.classNames(), href: this.href, id: this.componentId, target: this.external ? '_blank' : undefined, part: "link" }, h("slot", { key: '8f21b34931f85867b91e7c6c3fcc1952b9c430cd' }, this.href), this.external &&
+            h("pds-icon", { key: '60f1d607df5bf4cac7a9786f1560702719e73ff5', 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

@@ -33,7 +33,7 @@ export class PdsLoader {
         }
     }
     render() {
-        return (h(Host, { key: '7c8fdc4812310a291f992786f1e7951664afb8b6', 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: '411dbd7e815b2160abcbd0049f9e310a9059452c', class: "pds-loader--spinner" }, h("svg", { key: '1d59dc3aea7bb51015680c3657abb964a7b69106', style: this.style(), viewBox: "0 0 200 200", fill: "none" }, h("defs", { key: '9ed887bf61bda5cda7662952dfc9add1e3e1ca40' }, h("linearGradient", { key: 'af416e97cbfbb1b2cc5c6a06f168165d60f984c8', id: "spinner-secondHalf" }, h("stop", { key: 'dd3d79c1b422dbc29a2f7af106d7e648ea739e09', offset: "0%", "stop-opacity": "0", "stop-color": "currentColor" }), h("stop", { key: '313ef7bbcaecad0f4bf8eb268e05ef3ff48f55be', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" })), h("linearGradient", { key: 'b36dde7b2648bb9bef120354f70bab8fbc3879a8', id: "spinner-firstHalf" }, h("stop", { key: '7d38062cf2f39b1be1b29e7799ac68c59744a172', offset: "0%", "stop-opacity": "1", "stop-color": "currentColor" }), h("stop", { key: 'bfe1ea074d55af2098eca57459c54cd92a1ecafc', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" }))), h("g", { key: '0d2ee2c9abe4b90f8c38246c847c43a942316686', class: "pds-loader__spinner-path" }, h("path", { key: '87b0fc01bc7fe59e596013011034e2e1d6eabd38', stroke: "url(#spinner-secondHalf)", d: "M 4 100 A 96 96 0 0 1 196 100" }), h("path", { key: '07b2c9ddd18117d1ef40f3e26f76bafc8c8c5309', stroke: "url(#spinner-firstHalf)", d: "M 196 100 A 96 96 0 0 1 4 100" }), h("path", { key: 'f4a88b3aaefb70c1cb5582f94d507efe88a66fbe', stroke: "currentColor", "stroke-linecap": "round", d: "M 4 100 A 96 96 0 0 1 4 98" }))))), this.variant === 'typing' && (h("div", { key: 'ab906177f012e882487a447338c1e1155524b8c3', class: "pds-loader--typing" }, h("span", { key: 'b7080dffb6dfb66bd89ca754880e7456b33f9cdb' }), h("span", { key: '0b7d00d9e3fcbaecbade0860a2a50cec6f13b017' }), h("span", { key: '0e8cca8e86dba84a7b22913d5458c0c232661526' }))), h("div", { key: '540aee483c31b199a1c4ec09e6a848661379e593', class: `pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}` }, h("slot", { key: 'f94f166ef6a1ef8a995efc664cd2ddf509ad51d8', name: "label" }, "Loading..."))));
+        return (h(Host, { key: 'c01b34ac171a5581e1456737f17043cf8b47af8e', 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: 'ffd9e050fef503f1614c06896b8d888202df8656', class: "pds-loader--spinner" }, h("svg", { key: '056b84ca6f89f6dc93f72d115c9cad3efa9f468d', style: this.style(), viewBox: "0 0 200 200", fill: "none" }, h("defs", { key: '85bfeab6bc686de25e4156154273067fbcb3ba0b' }, h("linearGradient", { key: 'd32d0c03f7f851cd56365af16298c4da0db74ec8', id: "spinner-secondHalf" }, h("stop", { key: '1113756349854bc4ab581c0ce282dcd54def3891', offset: "0%", "stop-opacity": "0", "stop-color": "currentColor" }), h("stop", { key: '0f649b9e828409cab1b67a26d9a35d35e9fe7b0a', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" })), h("linearGradient", { key: '4aabb11799007ae40d7e112696809b35b652bb46', id: "spinner-firstHalf" }, h("stop", { key: '9624d9de9eaba0f29264d3b76bc27287bbc1b68b', offset: "0%", "stop-opacity": "1", "stop-color": "currentColor" }), h("stop", { key: '37fd5de86c5db30731b4dc39b1cd2cb6afbe7393', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" }))), h("g", { key: '06ccf17d191612cd5566714e69299a9e749618da', class: "pds-loader__spinner-path" }, h("path", { key: '9b5556b7c20e3c0f7effaa6d09120baa0b07e614', stroke: "url(#spinner-secondHalf)", d: "M 4 100 A 96 96 0 0 1 196 100" }), h("path", { key: 'aacb689fcace08aa9bee3c3eb2ee1b571ed1b9ee', stroke: "url(#spinner-firstHalf)", d: "M 196 100 A 96 96 0 0 1 4 100" }), h("path", { key: '875a3faf04e718f095d616db6a2cd1c7bcde2f14', stroke: "currentColor", "stroke-linecap": "round", d: "M 4 100 A 96 96 0 0 1 4 98" }))))), this.variant === 'typing' && (h("div", { key: '515a530c8acd7807d45c3f54ff1d264002e3e627', class: "pds-loader--typing" }, h("span", { key: 'bbb55e71064ab200ca388360a8a0986eda5b2008' }), h("span", { key: '77f42ba8124be61565479f21ed9253d928da49b3' }), h("span", { key: 'f8ef81fc9a9bf1a24f0bb3501c49291fe5028c5a' }))), h("div", { key: 'fd73795dfb15359ff655ed6abf4b2e41faa079a7', class: `pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}` }, h("slot", { key: 'cdfb46d54431a84b3ceaaaf94d48f69c42956c8d', name: "label" }, "Loading..."))));
     }
     static get is() { return "pds-loader"; }
     static get encapsulation() { return "shadow"; }

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

@@ -52,7 +52,7 @@ export class PdsPopover {
         popoverEl.style.left = `${left}px`;
     }
     render() {
-        return (h(Host, { key: '83f5e8306d9a8f9e541e638af6fab4e83700c9ce' }, h("button", { key: '11a49c046a9258b64508c3a48dff8b63468358e0', class: "pds-popover__trigger", popoverTarget: this.componentId, popoverTargetAction: this.popoverTargetAction, onClick: this.handleClick }, this.text), h("div", { key: 'c4034a97e7d3aa794d4cf20891cb1ccd31895fa9', class: `pds-popover ${this.active ? 'pds-popover--active' : ''}`, id: this.componentId, popover: this.popoverType, style: { maxWidth: `${this.maxWidth}px` } }, h("slot", { key: '2005210e15c7f73efed54de5980c117f682cc476' }))));
+        return (h(Host, { key: '3bed0c38e97500efb2bffcef8321a6b38215c434' }, h("button", { key: '0db59e1815568cb980ce0bbe5ef3502177015a1d', class: "pds-popover__trigger", popoverTarget: this.componentId, popoverTargetAction: this.popoverTargetAction, onClick: this.handleClick }, this.text), h("div", { key: 'd8c70cd36614cb3fc83669a843b00af0d18b03d4', class: `pds-popover ${this.active ? 'pds-popover--active' : ''}`, id: this.componentId, popover: this.popoverType, style: { maxWidth: `${this.maxWidth}px` } }, h("slot", { key: 'e7408b199525e88c0e975f9cc3e96200f82ea23e' }))));
     }
     static get is() { return "pds-popover"; }
     static get encapsulation() { return "shadow"; }

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

@@ -9,7 +9,7 @@ export class PdsProgress {
         this.showPercent = false;
     }
     render() {
-        return (h(Host, { key: 'c90714bd802c1ec10cc1d557b21c4761a348c559', class: this.animated ? { 'is-animated': this.animated } : '' }, h("div", { key: '969f33669523f2c67d30aa94652e3b70373b780a', class: "pds-progress" }, h("label", { key: '206a7c2297361caae1c5ecadacfd11939d8decee', class: "pds-progress__label", htmlFor: this.componentId }, this.label), h("progress", { key: 'e7748d02c4070bb894943fe0795a3c7008a43d62', id: this.componentId, max: "100", style: this.fillColor ? { '--color-progress-fill': this.fillColor } : {}, value: this.percent })), this.showPercent && h("div", { key: '7ec96692f3dc869069071bae747371ea6ef911ec', class: "pds-progress__percentage" }, this.percent, "%")));
+        return (h(Host, { key: 'a0a7cde165c1acc884366dfe7a368db5d7c4150e', class: this.animated ? { 'is-animated': this.animated } : '' }, h("div", { key: 'c2a8f262e0a6393448a0bc8a05dc49f30c451754', class: "pds-progress" }, h("label", { key: '422c51d5b06ef6d99e23cb2721b861ba9611b1df', class: "pds-progress__label", htmlFor: this.componentId }, this.label), h("progress", { key: '57081cc95c8bb44d6fa26cd7d1f7933108982165', id: this.componentId, max: "100", style: this.fillColor ? { '--color-progress-fill': this.fillColor } : {}, value: this.percent })), this.showPercent && h("div", { key: '37b88967a8584b43407314b0ba70faf4e43a9e5a', class: "pds-progress__percentage" }, this.percent, "%")));
     }
     static get is() { return "pds-progress"; }
     static get encapsulation() { return "shadow"; }

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

@@ -33,9 +33,9 @@ export class PdsRadio {
         return classNames.join('  ');
     }
     render() {
-        return (h(Host, { key: '1a4f52f466f516a5803b5a539db579890fd5ec97', class: this.classNames() }, h("label", { key: 'fbf2fc5d2be220ad70e314c146f57e25536dbb13', htmlFor: this.componentId }, h("input", { key: '1016b5d553e30af9c2e7199a05cd75b30e725606', "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 }), this.label), this.helperMessage &&
-            h("div", { key: '4ac07622503e267abb9e0a808870e75b49329231', class: 'pds-radio__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            h("div", { key: '808d6e1b93ed05b7875e9a5aeb7907a9c73f2410', class: `pds-radio__message pds-radio__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: 'c7bdadaf26d528c2ebb9e8790c9dd276ddb7d6b3', icon: danger, size: "small" }), this.errorMessage)));
+        return (h(Host, { key: 'f80c386dbbc3d77efbe0f4e2bcc4c78d72650f83', class: this.classNames() }, h("label", { key: '0cc2ae96ebdd1eb769021a72ae69ddf175e4ffe8', htmlFor: this.componentId }, h("input", { key: '8e643d6235a785dbd214ae191066b1b75a979171', "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 }), this.label), this.helperMessage &&
+            h("div", { key: 'c1a57d76d77eea12aab82fbfd257188f15ff73a9', class: 'pds-radio__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            h("div", { key: '9e09fc73c58ee4c192ba03a9384ab34f9f038ce7', class: `pds-radio__message pds-radio__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '80a49ff87ed900703a7f9f8d4127ea6e0ae9ca55', icon: danger, size: "small" }), this.errorMessage)));
     }
     static get is() { return "pds-radio"; }
     static get encapsulation() { return "scoped"; }

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

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