@pine-ds/core 2.14.0-mercury.0 → 2.14.0

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

@@ -6,10 +6,10 @@ export class PdsChip {
             this.pdsTagCloseClick.emit();
         };
         this.componentId = undefined;
-        this.sentiment = 'neutral';
         this.dot = false;
         this.label = undefined;
         this.large = false;
+        this.sentiment = 'neutral';
         this.variant = 'text';
     }
     classNames() {
@@ -23,7 +23,7 @@ export class PdsChip {
         if (this.sentiment) {
             classNames.push('pds-chip--' + this.sentiment);
         }
-        return classNames.join('  ');
+        return classNames.join(' ');
     }
     setChipContent() {
         const isDropdown = this.variant === 'dropdown';
@@ -31,18 +31,18 @@ export class PdsChip {
         return chipContent;
     }
     render() {
-        return (h(Host, { key: 'a2ad8c6a371ab1bead7715cdf7bbe684ce0d73a5', class: this.classNames(), id: this.componentId }, this.setChipContent(), this.variant === 'tag' && (h("button", { key: '83d2273a0785c4516a57ed618645d937ba33f9f5', class: "pds-chip__close", type: "button", onClick: this.handleCloseClick, "aria-label": "Remove" }, h("pds-icon", { key: '6ca04621d1acd134ce3352a034ea69ea7f794fbd', icon: remove, size: "12px" })))));
+        return (h(Host, { key: 'fac4e9beb31ba05d0c959fb53a9cd62caeacb219', class: this.classNames(), id: this.componentId }, this.setChipContent(), this.variant === 'tag' && (h("button", { key: '5f57c1cc76f6cffdebe6244f499b427e5f4c04e8', class: "pds-chip__close", type: "button", onClick: this.handleCloseClick, "aria-label": "Remove" }, h("pds-icon", { key: 'f4311271f68d700568dc51af9c1512fdfc7c262d', icon: remove, size: "12px" })))));
     }
     static get is() { return "pds-chip"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["pds-chip.scss"]
+            "$": ["../../global/styles/base.scss", "pds-chip.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["pds-chip.css"]
+            "$": ["../../global/styles/base.css", "pds-chip.css"]
         };
     }
     static get properties() {
@@ -64,27 +64,6 @@ export class PdsChip {
                 "attribute": "component-id",
                 "reflect": false
             },
-            "sentiment": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'accent' | 'danger' | 'info' | 'neutral' | 'success' | 'warning'",
-                    "resolved": "\"accent\" | \"danger\" | \"info\" | \"neutral\" | \"success\" | \"warning\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "defaultValue",
-                            "text": "'neutral'"
-                        }],
-                    "text": "Sets the color scheme of the chip."
-                },
-                "attribute": "sentiment",
-                "reflect": false,
-                "defaultValue": "'neutral'"
-            },
             "dot": {
                 "type": "boolean",
                 "mutable": false,
@@ -138,12 +117,33 @@ export class PdsChip {
                             "name": "defaultValue",
                             "text": "false"
                         }],
-                    "text": "Determines whether the chip should be rendered in a larger size."
+                    "text": "Determines whether the chip should be displayed in a larger size."
                 },
                 "attribute": "large",
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "sentiment": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'accent' | 'danger' | 'info' | 'neutral' | 'success' | 'warning'",
+                    "resolved": "\"accent\" | \"danger\" | \"info\" | \"neutral\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "'neutral'"
+                        }],
+                    "text": "Defines the color scheme of the chip."
+                },
+                "attribute": "sentiment",
+                "reflect": false,
+                "defaultValue": "'neutral'"
+            },
             "variant": {
                 "type": "string",
                 "mutable": false,
@@ -176,7 +176,7 @@ export class PdsChip {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Event when close button is clicked on tag variant."
+                    "text": "Event emitted when the close button is clicked on a tag variant chip."
                 },
                 "complexType": {
                     "original": "any",

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

@@ -1 +1 @@
-{"version":3,"file":"pds-chip.js","sourceRoot":"","sources":["../../../src/components/pds-chip/pds-chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAO9E,MAAM,OAAO,OAAO;;QAwCV,qBAAgB,GAAG,GAAG,EAAE;YAC9B,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC;QAC/B,CAAC,CAAA;;yBAhCqF,SAAS;mBAMjF,KAAK;;qBAWH,KAAK;uBAM0B,MAAM;;IAW7C,UAAU;QAChB,MAAM,UAAU,GAAG,CAAC,UAAU,CAAC,CAAC;QAEhC,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,UAAU,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;QACrC,CAAC;QACD,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,UAAU,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC;QAC/C,CAAC;QACD,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,UAAU,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC;QACjD,CAAC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC;IAEO,cAAc;QACpB,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,KAAK,UAAU,CAAC;QAC/C,MAAM,WAAW,GAAG,UAAU,CAAC,CAAC,CAAC,CAC/B,cAAQ,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAC,QAAQ;YAC3C,IAAI,CAAC,GAAG,IAAI,SAAG,KAAK,EAAC,eAAe,iBAAa,MAAM,GAAK;YAC5D,IAAI,CAAC,KAAK;YACX,gBAAU,IAAI,EAAE,SAAS,EAAE,IAAI,EAAC,MAAM,iBAAa,MAAM,GAAY,CAC9D,CACV,CAAC,CAAC,CAAC,CACF,YAAM,KAAK,EAAC,iBAAiB;YAC1B,IAAI,CAAC,GAAG,IAAI,SAAG,KAAK,EAAC,eAAe,iBAAa,MAAM,GAAK;YAC5D,IAAI,CAAC,KAAK,CACN,CACR,CAAC;QAEF,OAAO,WAAW,CAAC;IACrB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,WAAW;YACjD,IAAI,CAAC,cAAc,EAAE;YACrB,IAAI,CAAC,OAAO,KAAK,KAAK,IAAI,CACzB,+DAAQ,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,gBAAgB,gBAAa,QAAQ;gBAC/F,iEAAU,IAAI,EAAE,MAAM,EAAE,IAAI,EAAC,MAAM,GAAY,CACxC,CACV,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { downSmall, remove } from '@pine-ds/icons/icons';\nimport { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'pds-chip',\n  styleUrl: 'pds-chip.scss',\n  shadow: true,\n})\nexport class PdsChip {\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Sets the color scheme of the chip.\n   * @defaultValue 'neutral'\n   */\n  @Prop() sentiment: 'accent' | 'danger' | 'info' | 'neutral' | 'success' | 'warning' = 'neutral';\n\n  /**\n   * Determines whether a dot should be displayed on the chip.\n   * @defaultValue false\n   */\n  @Prop() dot = false;\n\n  /**\n   *  Sets the text label content of the chip.\n   */\n  @Prop() label: string;\n\n  /**\n   * Determines whether the chip should be rendered in a larger size.\n   * @defaultValue false\n   */\n  @Prop() large = false;\n\n  /**\n   * Sets the style variant of the chip.\n   * @defaultValue 'text'\n   */\n  @Prop() variant: 'text' | 'tag' | 'dropdown' = 'text';\n\n  /**\n   * Event when close button is clicked on tag variant.\n   */\n  @Event() pdsTagCloseClick: EventEmitter;\n\n  private handleCloseClick = () => {\n    this.pdsTagCloseClick.emit();\n  }\n\n  private classNames() {\n    const classNames = ['pds-chip'];\n\n    if (this.large) {\n      classNames.push('pds-chip--large');\n    }\n    if (this.variant) {\n      classNames.push('pds-chip--' + this.variant);\n    }\n    if (this.sentiment) {\n      classNames.push('pds-chip--' + this.sentiment);\n    }\n\n    return classNames.join('  ');\n  }\n\n  private setChipContent() {\n    const isDropdown = this.variant === 'dropdown';\n    const chipContent = isDropdown ? (\n      <button class=\"pds-chip__button\" type=\"button\">\n        {this.dot && <i class=\"pds-chip__dot\" aria-hidden=\"true\"></i>}\n        {this.label}\n        <pds-icon icon={downSmall} size=\"12px\" aria-hidden=\"true\"></pds-icon>\n      </button>\n    ) : (\n      <span class=\"pds-chip__label\">\n        {this.dot && <i class=\"pds-chip__dot\" aria-hidden=\"true\"></i>}\n        {this.label}\n      </span>\n    );\n\n    return chipContent;\n  }\n\n  render() {\n    return (\n      <Host class={this.classNames()} id={this.componentId}>\n        {this.setChipContent()}\n        {this.variant === 'tag' && (\n          <button class=\"pds-chip__close\" type=\"button\" onClick={this.handleCloseClick} aria-label=\"Remove\">\n            <pds-icon icon={remove} size=\"12px\"></pds-icon>\n          </button>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pds-chip.js","sourceRoot":"","sources":["../../../src/components/pds-chip/pds-chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAO9E,MAAM,OAAO,OAAO;;QAwCV,qBAAgB,GAAG,GAAG,EAAE;YAC9B,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC;QAC/B,CAAC,CAAC;;mBAhCY,KAAK;;qBAWH,KAAK;yBAMiE,SAAS;uBAMhD,MAAM;;IAW7C,UAAU;QAChB,MAAM,UAAU,GAAG,CAAC,UAAU,CAAC,CAAC;QAEhC,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,UAAU,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;QACrC,CAAC;QACD,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,UAAU,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC;QAC/C,CAAC;QACD,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,UAAU,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC;QACjD,CAAC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC9B,CAAC;IAEO,cAAc;QACpB,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,KAAK,UAAU,CAAC;QAC/C,MAAM,WAAW,GAAG,UAAU,CAAC,CAAC,CAAC,CAC/B,cAAQ,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAC,QAAQ;YAC3C,IAAI,CAAC,GAAG,IAAI,SAAG,KAAK,EAAC,eAAe,iBAAa,MAAM,GAAK;YAC5D,IAAI,CAAC,KAAK;YACX,gBAAU,IAAI,EAAE,SAAS,EAAE,IAAI,EAAC,MAAM,iBAAa,MAAM,GAAY,CAC9D,CACV,CAAC,CAAC,CAAC,CACF,YAAM,KAAK,EAAC,iBAAiB;YAC1B,IAAI,CAAC,GAAG,IAAI,SAAG,KAAK,EAAC,eAAe,iBAAa,MAAM,GAAK;YAC5D,IAAI,CAAC,KAAK,CACN,CACR,CAAC;QAEF,OAAO,WAAW,CAAC;IACrB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,WAAW;YACjD,IAAI,CAAC,cAAc,EAAE;YACrB,IAAI,CAAC,OAAO,KAAK,KAAK,IAAI,CACzB,+DAAQ,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,gBAAgB,gBAAa,QAAQ;gBAC/F,iEAAU,IAAI,EAAE,MAAM,EAAE,IAAI,EAAC,MAAM,GAAY,CACxC,CACV,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { downSmall, remove } from '@pine-ds/icons/icons';\nimport { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'pds-chip',\n  styleUrls: ['../../global/styles/base.scss', 'pds-chip.scss'],\n  shadow: true,\n})\nexport class PdsChip {\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines whether a dot should be displayed on the chip.\n   * @defaultValue false\n   */\n  @Prop() dot = false;\n\n  /**\n   * Sets the text label content of the chip.\n   */\n  @Prop() label: string;\n\n  /**\n   * Determines whether the chip should be displayed in a larger size.\n   * @defaultValue false\n   */\n  @Prop() large = false;\n\n  /**\n   * Defines the color scheme of the chip.\n   * @defaultValue 'neutral'\n   */\n  @Prop() sentiment: 'accent' | 'danger' | 'info' | 'neutral' | 'success' | 'warning' = 'neutral';\n\n  /**\n   * Sets the style variant of the chip.\n   * @defaultValue 'text'\n   */\n  @Prop() variant: 'text' | 'tag' | 'dropdown' = 'text';\n\n  /**\n   * Event emitted when the close button is clicked on a tag variant chip.\n   */\n  @Event() pdsTagCloseClick: EventEmitter;\n\n  private handleCloseClick = () => {\n    this.pdsTagCloseClick.emit();\n  };\n\n  private classNames() {\n    const classNames = ['pds-chip'];\n\n    if (this.large) {\n      classNames.push('pds-chip--large');\n    }\n    if (this.variant) {\n      classNames.push('pds-chip--' + this.variant);\n    }\n    if (this.sentiment) {\n      classNames.push('pds-chip--' + this.sentiment);\n    }\n\n    return classNames.join(' ');\n  }\n\n  private setChipContent() {\n    const isDropdown = this.variant === 'dropdown';\n    const chipContent = isDropdown ? (\n      <button class=\"pds-chip__button\" type=\"button\">\n        {this.dot && <i class=\"pds-chip__dot\" aria-hidden=\"true\"></i>}\n        {this.label}\n        <pds-icon icon={downSmall} size=\"12px\" aria-hidden=\"true\"></pds-icon>\n      </button>\n    ) : (\n      <span class=\"pds-chip__label\">\n        {this.dot && <i class=\"pds-chip__dot\" aria-hidden=\"true\"></i>}\n        {this.label}\n      </span>\n    );\n\n    return chipContent;\n  }\n\n  render() {\n    return (\n      <Host class={this.classNames()} id={this.componentId}>\n        {this.setChipContent()}\n        {this.variant === 'tag' && (\n          <button class=\"pds-chip__close\" type=\"button\" onClick={this.handleCloseClick} aria-label=\"Remove\">\n            <pds-icon icon={remove} size=\"12px\"></pds-icon>\n          </button>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,8 +1,7 @@
 :host(.pds-copytext) {
   --border-interactive-default: var(--pine-border-width-thin) solid var(--pine-color-grey-300);
   --border-interactive-hover: var(--pine-border-width-thin) solid var(--pine-color-grey-400);
-  --border-radius-default: var(--pine-border-radius-125);
-  --border-radius-hover: var(--pine-border-radius-0);
+  --border-radius-default: var(--pine-border-radius-circle);
   --border-width-default: var(--pine-border-width-none);
   --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);
   --color-background-default: var(--pine-color-white);
@@ -10,7 +9,7 @@
   --color-text-hover: var(--pine-color-grey-900);
   --copytext-color-background-hover: var(--pine-color-grey-200);
   --font-size-default: var(--pine-font-size-100);
-  --font-weight-default: var(--pine-font-weight-semi-bold);
+  --font-weight-default: var(--pine-font-weight-body-medium);
   --spacing-bordered-margin-inline-end: var(--pine-spacing-200);
   --spacing-bordered-padding-block: var(--pine-spacing-100);
   --spacing-bordered-padding-inline: var(--pine-spacing-200);
@@ -18,7 +17,7 @@
   --spacing-padding-block: var(--pine-spacing-050);
   --spacing-padding-inline: var(--pine-spacing-100);
   --spacing-padding-none: var(--pine-spacing-0);
-  --typography-default: var(--pine-font-weight-medium) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-circular);
+  --typography-default: var(--pine-font-weight-body-medium) var(--pine-font-size-body-md)/var(--pine-line-height-body) var(--pine-font-family-heading);
 }
 :host(.pds-copytext) pds-button {
   align-items: center;
@@ -30,12 +29,15 @@
   max-width: 100%;
   padding: var(--spacing-padding-block) var(--spacing-padding-inline);
 }
+:host(.pds-copytext) pds-button::part(button) {
+  padding-inline-end: calc(var(--spacing-padding-inline) / 2);
+}
 :host(.pds-copytext) pds-button::part(button):hover {
   background-color: var(--copytext-color-background-hover);
-  border-radius: var(--border-radius-hover);
   color: var(--color-text-hover);
 }
 :host(.pds-copytext) pds-button span {
+  font-weight: var(--font-weight-default);
   margin-inline-end: var(--spacing-margin-inline-end);
   white-space: nowrap;
 }

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

@@ -36,18 +36,18 @@ export class PdsCopytext {
         return classNames.join('  ');
     }
     render() {
-        return (h(Host, { key: '9960146a3ac3810bc14834a976f2e50627569dad', class: this.classNames(), id: this.componentId }, h("pds-button", { key: '9d8c6dc9824be2483982d4362a5c8d8c4c232432', type: "button", variant: "unstyled", onClick: this.handleClick }, h("span", { key: '7c093ec0ae96afdbad02adda3901be87989c9ce4' }, this.value), h("pds-icon", { key: '466f5c685e32be0067938869afee751db522d3d3', icon: copyIcon, size: "16px" }))));
+        return (h(Host, { key: '43aceb92fe0cc910613115bc882b04108efeffba', class: this.classNames(), id: this.componentId }, h("pds-button", { key: 'f152bc288e64192a80ed8f4f48d90e3edb7558cc', type: "button", variant: "unstyled", onClick: this.handleClick }, h("span", { key: 'ed9486b47835e21601047d2a915a412e664c6b4b' }, this.value), h("pds-icon", { key: 'bfbf6d92775171c36f768d654c5866f2f4ce8479', icon: copyIcon, size: "16px" }))));
     }
     static get is() { return "pds-copytext"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["pds-copytext.scss"]
+            "$": ["../../global/styles/base.scss", "pds-copytext.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["pds-copytext.css"]
+            "$": ["../../global/styles/base.css", "pds-copytext.css"]
         };
     }
     static get properties() {
@@ -67,7 +67,7 @@ export class PdsCopytext {
                             "name": "defaultValue",
                             "text": "true"
                         }],
-                    "text": "Determines whether `copytext` should have a border."
+                    "text": "Determines whether `copytext` should have a visible border."
                 },
                 "attribute": "border",
                 "reflect": true,
@@ -144,7 +144,7 @@ export class PdsCopytext {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "String that is displayed and that is also copied to the clipboard upon interaction."
+                    "text": "The string displayed that is also copied to the clipboard upon interaction."
                 },
                 "attribute": "value",
                 "reflect": false
@@ -160,7 +160,7 @@ export class PdsCopytext {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Event when copyText button is clicked."
+                    "text": "Event fired when copyText button is clicked."
                 },
                 "complexType": {
                     "original": "any",

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

@@ -1 +1 @@
-{"version":3,"file":"pds-copytext.js","sourceRoot":"","sources":["../../../src/components/pds-copytext/pds-copytext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAE9E,OAAO,EAAE,IAAI,IAAI,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAOxD,MAAM,OAAO,WAAW;;QAkCd,oBAAe,GAAG,KAAK,EAAE,KAAa,EAAE,EAAE;YAChD,IAAI,CAAC;gBACH,IAAI,OAAO,SAAS,CAAC,SAAS,KAAK,WAAW,EAAE,CAAC;oBAC/C,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;oBAC3C,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;gBACpD,CAAC;YACH,CAAC;YAAC,OAAO,GAAG,EAAE,CAAC;gBACb,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,oCAAoC,GAAG,EAAE,CAAC,CAAC;YACxE,CAAC;QACH,CAAC,CAAC;QAEM,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACnC,CAAC,CAAC;sBA1CgC,IAAI;;yBAWlB,KAAK;wBAMN,KAAK;;;IA2BhB,UAAU;QAChB,MAAM,UAAU,GAAG,CAAC,cAAc,CAAC,CAAC;QAEpC,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,UAAU,CAAC,IAAI,CAAC,wBAAwB,CAAC,CAAC;QAC5C,CAAC;QAED,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,UAAU,CAAC,IAAI,CAAC,0BAA0B,CAAC,CAAC;QAC9C,CAAC;QAED,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,UAAU,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAC;QAC7C,CAAC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,WAAW;YAClD,mEAAY,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAC,UAAU,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW;gBACpE,+DAAO,IAAI,CAAC,KAAK,CAAQ;gBACzB,iEAAU,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,MAAM,GAAY,CACtC,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, Host, h, Prop } from '@stencil/core';\n\nimport { copy as copyIcon } from '@pine-ds/icons/icons';\n\n@Component({\n  tag: 'pds-copytext',\n  styleUrl: 'pds-copytext.scss',\n  shadow: true,\n})\nexport class PdsCopytext {\n  /**\n   * Determines whether `copytext` should have a border.\n   * @defaultValue true\n   */\n  @Prop({ reflect: true }) border = true;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines whether `copytext` should expand to the full width of its container.\n   * @defaultValue false\n   */\n  @Prop() fullWidth = false;\n\n  /**\n   * Determines whether the `value` should truncate and display with an ellipsis.\n   * @defaultValue false\n   */\n  @Prop() truncate = false;\n\n  /**\n   * String that is displayed and that is also copied to the clipboard upon interaction.\n   */\n  @Prop() value!: string;\n\n  /**\n   * Event when copyText button is clicked.\n   */\n  @Event() pdsCopyTextClick: EventEmitter;\n\n  private copyToClipboard = async (value: string) => {\n    try {\n      if (typeof navigator.clipboard !== 'undefined') {\n        await navigator.clipboard.writeText(value);\n        this.pdsCopyTextClick.emit('Copied to clipboard');\n      }\n    } catch (err) {\n      this.pdsCopyTextClick.emit(`Error writing text to clipboard: ${err}`);\n    }\n  };\n\n  private handleClick = () => {\n    this.copyToClipboard(this.value);\n  };\n\n  private classNames() {\n    const classNames = ['pds-copytext'];\n\n    if (this.border) {\n      classNames.push('pds-copytext--bordered');\n    }\n\n    if (this.fullWidth) {\n      classNames.push('pds-copytext--full-width');\n    }\n\n    if (this.truncate) {\n      classNames.push('pds-copytext--truncated');\n    }\n\n    return classNames.join('  ');\n  }\n\n  render() {\n    return (\n      <Host class={this.classNames()} id={this.componentId}>\n        <pds-button type=\"button\" variant=\"unstyled\" onClick={this.handleClick}>\n          <span>{this.value}</span>\n          <pds-icon icon={copyIcon} size=\"16px\"></pds-icon>\n        </pds-button>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pds-copytext.js","sourceRoot":"","sources":["../../../src/components/pds-copytext/pds-copytext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAE9E,OAAO,EAAE,IAAI,IAAI,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAOxD,MAAM,OAAO,WAAW;;QAkCd,oBAAe,GAAG,KAAK,EAAE,KAAa,EAAE,EAAE;YAChD,IAAI,CAAC;gBACH,IAAI,OAAO,SAAS,CAAC,SAAS,KAAK,WAAW,EAAE,CAAC;oBAC/C,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;oBAC3C,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;gBACpD,CAAC;YACH,CAAC;YAAC,OAAO,GAAG,EAAE,CAAC;gBACb,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,oCAAoC,GAAG,EAAE,CAAC,CAAC;YACxE,CAAC;QACH,CAAC,CAAC;QAEM,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACnC,CAAC,CAAC;sBA1CgC,IAAI;;yBAWlB,KAAK;wBAMN,KAAK;;;IA2BhB,UAAU;QAChB,MAAM,UAAU,GAAG,CAAC,cAAc,CAAC,CAAC;QAEpC,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,UAAU,CAAC,IAAI,CAAC,wBAAwB,CAAC,CAAC;QAC5C,CAAC;QAED,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,UAAU,CAAC,IAAI,CAAC,0BAA0B,CAAC,CAAC;QAC9C,CAAC;QAED,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,UAAU,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAC;QAC7C,CAAC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,WAAW;YAClD,mEAAY,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAC,UAAU,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW;gBACpE,+DAAO,IAAI,CAAC,KAAK,CAAQ;gBACzB,iEAAU,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,MAAM,GAAY,CACtC,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, Host, h, Prop } from '@stencil/core';\n\nimport { copy as copyIcon } from '@pine-ds/icons/icons';\n\n@Component({\n  tag: 'pds-copytext',\n  styleUrls: ['../../global/styles/base.scss', 'pds-copytext.scss'],\n  shadow: true,\n})\nexport class PdsCopytext {\n  /**\n   * Determines whether `copytext` should have a visible border.\n   * @defaultValue true\n   */\n  @Prop({ reflect: true }) border = true;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines whether `copytext` should expand to the full width of its container.\n   * @defaultValue false\n   */\n  @Prop() fullWidth = false;\n\n  /**\n   * Determines whether the `value` should truncate and display with an ellipsis.\n   * @defaultValue false\n   */\n  @Prop() truncate = false;\n\n  /**\n   * The string displayed that is also copied to the clipboard upon interaction.\n   */\n  @Prop() value!: string;\n\n  /**\n   * Event fired when copyText button is clicked.\n   */\n  @Event() pdsCopyTextClick: EventEmitter;\n\n  private copyToClipboard = async (value: string) => {\n    try {\n      if (typeof navigator.clipboard !== 'undefined') {\n        await navigator.clipboard.writeText(value);\n        this.pdsCopyTextClick.emit('Copied to clipboard');\n      }\n    } catch (err) {\n      this.pdsCopyTextClick.emit(`Error writing text to clipboard: ${err}`);\n    }\n  };\n\n  private handleClick = () => {\n    this.copyToClipboard(this.value);\n  };\n\n  private classNames() {\n    const classNames = ['pds-copytext'];\n\n    if (this.border) {\n      classNames.push('pds-copytext--bordered');\n    }\n\n    if (this.fullWidth) {\n      classNames.push('pds-copytext--full-width');\n    }\n\n    if (this.truncate) {\n      classNames.push('pds-copytext--truncated');\n    }\n\n    return classNames.join('  ');\n  }\n\n  render() {\n    return (\n      <Host class={this.classNames()} id={this.componentId}>\n        <pds-button type=\"button\" variant=\"unstyled\" onClick={this.handleClick}>\n          <span>{this.value}</span>\n          <pds-icon icon={copyIcon} size=\"16px\"></pds-icon>\n        </pds-button>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,5 +1,5 @@
 :host {
-  --color-background-default: var(--pine-color-grey-400);
+  --color-background-default: var(--pine-color-grey-200);
   --spacing-offset-xxs: var(--pine-spacing-050);
   --spacing-offset-xs: var(--pine-spacing-100);
   --spacing-offset-sm: var(--pine-spacing-200);

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

@@ -17,18 +17,18 @@ export class PdsDivider {
         return classNames.join(' ');
     }
     render() {
-        return (h(Host, { key: '3f2301abdcc69f48039e92ad5308ea7a27b3573f', id: this.componentId }, h("hr", { key: '763d4a15811b9298b77d0e6227e18dccdf61825e', class: this.classNames() })));
+        return (h(Host, { key: 'cb64d56832d159848ac7d45959b5f1d9874715d7', id: this.componentId }, h("hr", { key: '10a7b11448b031b24174fe9278ac05504cf8523c', class: this.classNames() })));
     }
     static get is() { return "pds-divider"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["pds-divider.scss"]
+            "$": ["../../global/styles/base.scss", "pds-divider.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["pds-divider.css"]
+            "$": ["../../global/styles/base.css", "pds-divider.css"]
         };
     }
     static get properties() {
@@ -82,7 +82,7 @@ export class PdsDivider {
                             "name": "defaultValue",
                             "text": "false"
                         }],
-                    "text": "Sets divider to display vertically"
+                    "text": "Sets divider to display vertically."
                 },
                 "attribute": "vertical",
                 "reflect": false,

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

@@ -1 +1 @@
-{"version":3,"file":"pds-divider.js","sourceRoot":"","sources":["../../../src/components/pds-divider/pds-divider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,UAAU;;;;wBAeF,KAAK;;IAEhB,UAAU;QAChB,MAAM,UAAU,GAAG,CAAC,aAAa,CAAC,CAAC;QAEnC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,UAAU,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC;QAC3C,CAAC;QAED,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,MAAM,eAAe,GAAG,sBAAsB,GAAG,IAAI,CAAC,MAAM,CAAC;YAC7D,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;QACnC,CAAC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC9B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,EAAE,EAAE,IAAI,CAAC,WAAW;YACxB,2DAAI,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,GAAI,CAC3B,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'pds-divider',\n  styleUrl: 'pds-divider.scss',\n  shadow: true,\n})\nexport class PdsDivider {\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Adds offset margin/padding to expand the width (horizontal) or the height (vertical) of divider.\n   */\n  @Prop() offset: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';\n\n  /**\n   * Sets divider to display vertically\n   * @defaultValue false\n   */\n  @Prop() vertical = false;\n\n  private classNames() {\n    const classNames = ['pds-divider'];\n\n    if (this.vertical) {\n      classNames.push('pds-divider--vertical');\n    }\n\n    if (this.offset) {\n      const offsetClassName = 'pds-divider--offset-' + this.offset;\n      classNames.push(offsetClassName);\n    }\n\n    return classNames.join(' ');\n  }\n\n  render() {\n    return (\n      <Host id={this.componentId}>\n        <hr class={this.classNames()} />\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pds-divider.js","sourceRoot":"","sources":["../../../src/components/pds-divider/pds-divider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,UAAU;;;;wBAeF,KAAK;;IAEhB,UAAU;QAChB,MAAM,UAAU,GAAG,CAAC,aAAa,CAAC,CAAC;QAEnC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,UAAU,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC;QAC3C,CAAC;QAED,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,MAAM,eAAe,GAAG,sBAAsB,GAAG,IAAI,CAAC,MAAM,CAAC;YAC7D,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;QACnC,CAAC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC9B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,EAAE,EAAE,IAAI,CAAC,WAAW;YACxB,2DAAI,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,GAAI,CAC3B,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'pds-divider',\n  styleUrls: ['../../global/styles/base.scss', 'pds-divider.scss'],\n  shadow: true,\n})\nexport class PdsDivider {\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Adds offset margin/padding to expand the width (horizontal) or the height (vertical) of divider.\n   */\n  @Prop() offset: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';\n\n  /**\n   * Sets divider to display vertically.\n   * @defaultValue false\n   */\n  @Prop() vertical = false;\n\n  private classNames() {\n    const classNames = ['pds-divider'];\n\n    if (this.vertical) {\n      classNames.push('pds-divider--vertical');\n    }\n\n    if (this.offset) {\n      const offsetClassName = 'pds-divider--offset-' + this.offset;\n      classNames.push(offsetClassName);\n    }\n\n    return classNames.join(' ');\n  }\n\n  render() {\n    return (\n      <Host id={this.componentId}>\n        <hr class={this.classNames()} />\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -12,5 +12,5 @@ const BaseTemplate = (args) => html`<pds-icon color=${args.color} name=${args.na
 
 export const Default = BaseTemplate.bind();
 Default.args = {
-  name: 'upload'
+  name: 'headset'
 };

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

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

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

@@ -11,20 +11,20 @@ export class PdsImage {
         this.width = undefined;
     }
     render() {
-        return (h(Host, { key: '8d97b63e1c5b0eb72117d6378a0b6d869c0dbdea', class: {
+        return (h(Host, { key: 'b74f7f59eadec75c48052e0760ef07ea0b5eb848', class: {
                 'pds-image': true,
-            }, id: this.componentId }, h("img", { key: '3cc2d1c185244c8e8de2f7258b85194b37a4ff38', 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: '0e993e6d4cb70d73562cbcd3cf193080406adf7a', 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"; }
     static get originalStyleUrls() {
         return {
-            "$": ["pds-image.scss"]
+            "$": ["../../global/styles/base.scss", "pds-image.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["pds-image.css"]
+            "$": ["../../global/styles/base.css", "pds-image.css"]
         };
     }
     static get properties() {
@@ -40,8 +40,11 @@ export class PdsImage {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "The image's alt tag. If none is provided,\nit will default to an empty string."
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "''"
+                        }],
+                    "text": "The image's alt tag. If none is provided,\nit will default to an empty string, which is desired for\ndecorative images."
                 },
                 "attribute": "alt",
                 "reflect": false,
@@ -92,7 +95,10 @@ export class PdsImage {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "eager"
+                        }],
                     "text": "Indicates how the browser should load the image."
                 },
                 "attribute": "loading",
@@ -111,7 +117,7 @@ export class PdsImage {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Determines the intended display size of an image\nwithin certian breakpoints. Has no effect if `srcset`\nis not set or value has no width descriptor."
+                    "text": "Determines the intended display size of an image\nwithin certain breakpoints. Has no effect if `srcset`\nis not set or value has no width descriptor."
                 },
                 "attribute": "sizes",
                 "reflect": false
@@ -145,7 +151,7 @@ export class PdsImage {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "A set of image sources for the browser to use."
+                    "text": "A set of image sources for the browser to use\nfor responsiveness."
                 },
                 "attribute": "srcset",
                 "reflect": false

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

@@ -1 +1 @@
-{"version":3,"file":"pds-image.js","sourceRoot":"","sources":["../../../src/components/pds-image/pds-image.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,QAAQ;;mBAKJ,EAAE;;;uBAiBoB,OAAO;;;;;;IA0B5C,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,WAAW,EAAE,IAAI;aAClB,EACD,EAAE,EAAE,IAAI,CAAC,WAAW;YAEpB,4DACE,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,GACjB,CACG,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'pds-image',\n  styleUrl: 'pds-image.scss',\n  shadow: true,\n})\nexport class PdsImage {\n  /**\n   * The image's alt tag. If none is provided,\n   * it will default to an empty string.\n   */\n  @Prop() alt? = '';\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * The height of the image in pixels. Setting this will\n   * devote space in the layout to prevent layout\n   * shifts when the image is loaded.\n   */\n  @Prop() height?: number;\n\n  /**\n   * Indicates how the browser should load the image.\n   */\n  @Prop() loading?: 'eager' | 'lazy' = 'eager';\n\n  /**\n   * Determines the intended display size of an image\n   * within certian breakpoints. Has no effect if `srcset`\n   * is not set or value has no width descriptor.\n   */\n  @Prop() sizes?: string;\n\n  /**\n   * The image's source.\n   */\n  @Prop() src: string;\n\n  /**\n   * A set of image sources for the browser to use.\n   */\n  @Prop() srcset?: string\n\n  /**\n   * The width of the image in pixels. Setting this will\n   * devote space in the layout to prevent layout\n   * shifts when the image is loaded.\n   */\n  @Prop() width?: number;\n\n  render() {\n    return (\n      <Host\n        class={{\n          'pds-image': true,\n        }}\n        id={this.componentId}\n      >\n        <img\n          alt={this.alt}\n          height={this.height}\n          loading={this.loading}\n          sizes={this.sizes}\n          src={this.src}\n          srcset={this.srcset}\n          width={this.width}\n        />\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pds-image.js","sourceRoot":"","sources":["../../../src/components/pds-image/pds-image.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,QAAQ;;mBAOJ,EAAE;;;uBAkBoB,OAAO;;;;;;IA2B5C,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,WAAW,EAAE,IAAI;aAClB,EACD,EAAE,EAAE,IAAI,CAAC,WAAW;YAEpB,4DACE,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,GACjB,CACG,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'pds-image',\n  styleUrls: ['../../global/styles/base.scss', 'pds-image.scss'],\n  shadow: true,\n})\nexport class PdsImage {\n  /**\n   * The image's alt tag. If none is provided,\n   * it will default to an empty string, which is desired for\n   * decorative images.\n   * @defaultValue ''\n   */\n  @Prop() alt? = '';\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * The height of the image in pixels. Setting this will\n   * devote space in the layout to prevent layout\n   * shifts when the image is loaded.\n   */\n  @Prop() height?: number;\n\n  /**\n   * Indicates how the browser should load the image.\n   * @defaultValue eager\n   */\n  @Prop() loading?: 'eager' | 'lazy' = 'eager';\n\n  /**\n   * Determines the intended display size of an image\n   * within certain breakpoints. Has no effect if `srcset`\n   * is not set or value has no width descriptor.\n   */\n  @Prop() sizes?: string;\n\n  /**\n   * The image's source.\n   */\n  @Prop() src: string;\n\n  /**\n   * A set of image sources for the browser to use\n   * for responsiveness.\n   */\n  @Prop() srcset?: string\n\n  /**\n   * The width of the image in pixels. Setting this will\n   * devote space in the layout to prevent layout\n   * shifts when the image is loaded.\n   */\n  @Prop() width?: number;\n\n  render() {\n    return (\n      <Host\n        class={{\n          'pds-image': true,\n        }}\n        id={this.componentId}\n      >\n        <img\n          alt={this.alt}\n          height={this.height}\n          loading={this.loading}\n          sizes={this.sizes}\n          src={this.src}\n          srcset={this.srcset}\n          width={this.width}\n        />\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -22,14 +22,16 @@ const SizesAndSrcsetTemplate = (args) => html`<pds-image alt="${args.alt}" sizes
 
 export const Default = BaseTemplate.bind();
 Default.args = {
-  alt: 'Random Unsplash',
-  src: '//source.unsplash.com/320x180',
+  alt: 'Random Bear',
+  src: 'https://placebear.com/320/180',
+  height: '180',
+  width: '320'
 }
 
 export const SizesAndSrcset = SizesAndSrcsetTemplate.bind();
 SizesAndSrcset.args = {
-  alt: 'Random Unsplash',
+  alt: 'Random Bear',
   sizes: '(max-width: 450px) 150px, 600px',
-  src: '//source.unsplash.com/600x200',
-  srcset: '//source.unsplash.com/150x150 400w, //source.unsplash.com/600x200',
+  src: 'https://placebear.com/600/200',
+  srcset: 'https://placebear.com/150/150 400w, https://placebear.com/600/200',
 }

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

@@ -1,14 +1,19 @@
 :host {
   --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);
-  --box-shadow-focus-error: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-red-200);
-  --color-text-default: var(--pine-color-grey-950);
+  --box-shadow-focus-error: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-red-300);
   --color-background-disabled: var(--pine-color-grey-100);
-  --color-border-default: var(--pine-color-grey-400);
-  --color-border-error: var(--pine-color-red-300);
+  --color-background-error: var(--pine-color-red-050);
+  --color-border-active: var(--pine-color-grey-400);
+  --color-border-default: var(--pine-color-grey-300);
+  --color-border-disabled: var(--pine-color-grey-200);
+  --color-border-error: var(--pine-color-red-600);
   --color-border-hover: var(--pine-color-grey-500);
-  --color-disabled-text: var(--pine-color-grey-500);
-  --color-placeholder-text: var(--pine-color-grey-700);
-  --font-size-helper-message: var(--pine-font-size-100);
+  --color-text-default: var(--pine-color-grey-950);
+  --color-text-disabled: var(--pine-color-grey-600);
+  --color-text-error: var(--pine-color-red-600);
+  --color-text-placeholder: var(--pine-color-grey-600);
+  --color-text-placeholder-disabled: var(--pine-color-grey-400);
+  --font-size-helper-message: var(--pine-font-size-085);
   --font-size-input-field: var(--pine-font-size-100);
   --font-size-label: var(--pine-font-size-100);
   --font-weight-helper-message: var(--pine-font-weight-normal);
@@ -21,6 +26,7 @@
   --spacing-input-field-padding-inline: var(--pine-spacing-200);
   --spacing-label-margin-block-end: var(--pine-spacing-100);
   --spacing-margin-top-helper-message: var(--pine-spacing-100);
+  --spacing-icon-error-message: var(--pine-spacing-050);
   display: inline;
 }
 
@@ -48,29 +54,46 @@ input {
 }
 input:disabled {
   background-color: var(--color-background-disabled);
-  color: var(--color-disabled-text);
+  border-color: var(--color-border-disabled);
+  color: var(--color-text-disabled);
   cursor: not-allowed;
+  /* stylelint-disable */
+  /* stylelint-enable */
+}
+input:disabled::-webkit-input-placeholder {
+  color: var(--color-text-placeholder-disabled);
+}
+input:disabled::-moz-placeholder {
+  color: var(--color-text-placeholder-disabled);
+}
+input:disabled::-moz-placeholder {
+  color: var(--color-text-placeholder-disabled);
+}
+input:disabled:-ms-input-placeholder {
+  color: var(--color-text-placeholder-disabled);
 }
 input:hover {
   border-color: var(--color-border-hover);
 }
 input:focus-visible {
+  border-color: var(--color-border-active);
   box-shadow: var(--box-shadow-focus);
   outline: none;
 }
 input::-webkit-input-placeholder {
-  color: var(--color-placeholder-text);
+  color: var(--color-text-placeholder);
 }
 input::-moz-placeholder {
-  color: var(--color-placeholder-text);
+  color: var(--color-text-placeholder);
 }
 input::-moz-placeholder {
-  color: var(--color-placeholder-text);
+  color: var(--color-text-placeholder);
 }
 input:-ms-input-placeholder {
-  color: var(--color-placeholder-text);
+  color: var(--color-text-placeholder);
 }
 input:has(~ .pds-input__error-message) {
+  background-color: var(--color-background-error);
   border-color: var(--color-border-error);
 }
 input:has(~ .pds-input__error-message):focus-visible {
@@ -88,5 +111,9 @@ input:has(~ .pds-input__error-message):focus-visible {
 }
 
 .pds-input__error-message {
-  color: var(--color-error);
+  align-items: center;
+  color: var(--color-text-error);
+  display: flex;
+  font-size: var(--font-size-helper-message);
+  gap: var(--spacing-icon-error-message);
 }