@pine-ds/core 2.1.0-mercury.0 → 2.1.1

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: '810bb5579a28b8a1867f202ccf555bcb0a1be2a5', 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: '66d78e000caaa91db5dbd68ce34824215d3c7bf9', 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() {

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;;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  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.\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"]}

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,13 +1,18 @@
 :host {
-  --box-shadow-focus: 0 0 0 2px var(--pine-color-blue-200);
-  --box-shadow-focus-error: 0 0 0 2px var(--pine-color-red-200);
-  --color-text-default: var(--pine-color-charcoal-500);
+  --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-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-charcoal-200);
+  --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-100);
   --font-size-input-field: var(--pine-font-size-100);
   --font-size-label: var(--pine-font-size-100);
@@ -48,29 +53,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 +110,5 @@ input:has(~ .pds-input__error-message):focus-visible {
 }
 
 .pds-input__error-message {
-  color: var(--color-error);
+  color: var(--color-text-error);
 }

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

@@ -10,6 +10,7 @@ export class PdsInput {
             }
             this.pdsInput.emit(ev);
         };
+        this.autocomplete = undefined;
         this.componentId = undefined;
         this.disabled = undefined;
         this.errorMessage = undefined;
@@ -24,24 +25,41 @@ export class PdsInput {
         this.value = undefined;
     }
     render() {
-        return (h(Host, { key: 'd11ef85231a61d59752e289cb0832eb971115a84', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: '722e05d546051d094ee4d870eaaefea24d241032', class: "pds-input" }, h(PdsLabel, { key: 'a7ff96341748d12c1b9d56dfeb2fc5a9f1cfc2b7', htmlFor: this.componentId, text: this.label }), h("input", { key: '89d5b9cfa436ca98c58da38455c6e08abce6937c', class: "pds-input__field", "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, 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 }), this.helperMessage &&
-            h("p", { key: '4fe86e4f98f16c25009b9011cf02e7a71c9050ef', class: "pds-input__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            h("p", { key: '50c1d4b6603868f5494c599298b23814df26782b', class: "pds-input__error-message", id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, this.errorMessage))));
+        return (h(Host, { key: '8990807dd2c25acb305113e838b14c4c6f5969d2', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: '15f1ccb9ef012df067bcb9feb51639a6e7d2c2c8', class: "pds-input" }, h(PdsLabel, { key: '73231c8d2bec7262e7bd6a0d002a130d29b102aa', htmlFor: this.componentId, text: this.label }), h("input", { key: 'd916e33b722be33c7908bad78400648fe39a120d', class: "pds-input__field", "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 }), this.helperMessage &&
+            h("p", { key: '91fb93380296d18b97e5469bd56d04e8aceab20d', class: "pds-input__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            h("p", { key: '97fe0723e77b49b6be1f7666888a5d97d9ab842b', class: "pds-input__error-message", id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, this.errorMessage))));
     }
     static get is() { return "pds-input"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["pds-input.scss"]
+            "$": ["../../global/styles/base.scss", "pds-input.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["pds-input.css"]
+            "$": ["../../global/styles/base.css", "pds-input.css"]
         };
     }
     static get properties() {
         return {
+            "autocomplete": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies if and how the browser provides `autocomplete` assistance for the field."
+                },
+                "attribute": "autocomplete",
+                "reflect": false
+            },
             "componentId": {
                 "type": "string",
                 "mutable": false,

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

@@ -1 +1 @@
-{"version":3,"file":"pds-input.js","sourceRoot":"","sources":["../../../src/components/pds-input/pds-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC9E,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAO5D,MAAM,OAAO,QAAQ;;QAoEX,iBAAY,GAAG,CAAC,EAAS,EAAE,EAAE;YACnC,MAAM,KAAK,GAAG,EAAE,CAAC,MAAiC,CAAC;YACnD,IAAI,KAAK,EAAE,CAAC;gBACV,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;YACjC,CAAC;YACD,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAgB,CAAC,CAAC;QACvC,CAAC,CAAC;;;;;;;;;;;oBAlBa,MAAM;;;IAoBrB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,sEACY,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI;YAE5C,4DAAK,KAAK,EAAC,WAAW;gBACpB,EAAC,QAAQ,qDAAC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,GAAI;gBACzD,8DAAO,KAAK,EAAC,kBAAkB,sBACX,iBAAiB,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,kBACzE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC/C,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,YAAY,GAC1B;gBACD,IAAI,CAAC,aAAa;oBACjB,0DACE,KAAK,EAAC,2BAA2B,EACjC,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,IAExC,IAAI,CAAC,aAAa,CACjB;gBAEL,IAAI,CAAC,YAAY;oBAChB,0DACE,KAAK,EAAC,0BAA0B,EAChC,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,eAC9B,WAAW,IAEpB,IAAI,CAAC,YAAY,CAChB,CAEF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { PdsLabel } from '../_internal/pds-label/pds-label';\n\n@Component({\n  tag: 'pds-input',\n  styleUrl: 'pds-input.scss',\n  shadow: true,\n})\nexport class PdsInput {\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Indicates whether or not the input field is disabled.\n   */\n  @Prop() disabled?: boolean;\n\n  /**\n   * Specifies the error message and provides an error-themed treatment to the field.\n   */\n  @Prop() errorMessage?: string;\n\n  /**\n   * Displays a message or hint below the input field.\n   */\n  @Prop() helperMessage?: string;\n\n  /**\n   * Indicates whether or not the input field is invalid or throws an error.\n   */\n  @Prop() invalid?: boolean;\n\n  /**\n   * Text to be displayed as the input label.\n   */\n  @Prop() label?: string;\n\n  /**\n   * Specifies the name. Submitted with the form name/value pair.\n   */\n  @Prop() name?: string;\n\n  /**\n   * Specifies a short hint that describes the expected value of the input field.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * Indicates whether or not the input field is readonly.\n   */\n  @Prop() readonly?: boolean;\n\n  /**\n   * Indicates whether or not the input field is required.\n   */\n  @Prop() required?: boolean;\n\n  /**\n   * Determines the type of control that will be displayed\n   `'email'`, `'number'`, `'password'`, `'tel'`, `'text'`\n   * @defaultValue \"text\"\n   */\n  @Prop() type = 'text';\n\n  /**\n   * The value of the input.\n   */\n  @Prop({mutable: true}) value?: string;\n\n  /**\n   * Emitted when a keyboard input occurred.\n   */\n  @Event() pdsInput: EventEmitter<InputEvent>;\n\n  private onInputEvent = (ev: Event) => {\n    const input = ev.target as HTMLInputElement | null;\n    if (input) {\n      this.value = input.value || '';\n    }\n    this.pdsInput.emit(ev as InputEvent);\n  };\n\n  render() {\n    return (\n      <Host\n        aria-disabled={this.disabled ? 'true' : null}\n      >\n        <div class=\"pds-input\">\n          <PdsLabel htmlFor={this.componentId} text={this.label} />\n          <input class=\"pds-input__field\"\n            aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n            aria-invalid={this.invalid ? \"true\" : undefined}\n            disabled={this.disabled}\n            id={this.componentId}\n            name={this.name}\n            placeholder={this.placeholder}\n            readOnly={this.readonly}\n            required={this.required}\n            type={this.type}\n            value={this.value}\n            onInput={this.onInputEvent}\n          />\n          {this.helperMessage &&\n            <p\n              class=\"pds-input__helper-message\"\n              id={messageId(this.componentId, 'helper')}\n            >\n              {this.helperMessage}\n            </p>\n          }\n          {this.errorMessage &&\n            <p\n              class=\"pds-input__error-message\"\n              id={messageId(this.componentId, 'error')}\n              aria-live=\"assertive\"\n            >\n              {this.errorMessage}\n            </p>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pds-input.js","sourceRoot":"","sources":["../../../src/components/pds-input/pds-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC9E,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAO5D,MAAM,OAAO,QAAQ;;QA0EX,iBAAY,GAAG,CAAC,EAAS,EAAE,EAAE;YACnC,MAAM,KAAK,GAAG,EAAE,CAAC,MAAiC,CAAC;YACnD,IAAI,KAAK,EAAE,CAAC;gBACV,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;YACjC,CAAC;YACD,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAgB,CAAC,CAAC;QACvC,CAAC,CAAC;;;;;;;;;;;;oBAlBa,MAAM;;;IAoBrB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,sEACY,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI;YAE5C,4DAAK,KAAK,EAAC,WAAW;gBACpB,EAAC,QAAQ,qDAAC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,GAAI;gBACzD,8DAAO,KAAK,EAAC,kBAAkB,sBACX,iBAAiB,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,kBACzE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC/C,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,YAAY,GAC1B;gBACD,IAAI,CAAC,aAAa;oBACjB,0DACE,KAAK,EAAC,2BAA2B,EACjC,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,IAExC,IAAI,CAAC,aAAa,CACjB;gBAEL,IAAI,CAAC,YAAY;oBAChB,0DACE,KAAK,EAAC,0BAA0B,EAChC,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,eAC9B,WAAW,IAEpB,IAAI,CAAC,YAAY,CAChB,CAEF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { PdsLabel } from '../_internal/pds-label/pds-label';\n\n@Component({\n  tag: 'pds-input',\n  styleUrls: ['../../global/styles/base.scss', 'pds-input.scss'],\n  shadow: true,\n})\nexport class PdsInput {\n\n  /**\n   * Specifies if and how the browser provides `autocomplete` assistance for the field.\n   */\n  @Prop() autocomplete: string;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Indicates whether or not the input field is disabled.\n   */\n  @Prop() disabled?: boolean;\n\n  /**\n   * Specifies the error message and provides an error-themed treatment to the field.\n   */\n  @Prop() errorMessage?: string;\n\n  /**\n   * Displays a message or hint below the input field.\n   */\n  @Prop() helperMessage?: string;\n\n  /**\n   * Indicates whether or not the input field is invalid or throws an error.\n   */\n  @Prop() invalid?: boolean;\n\n  /**\n   * Text to be displayed as the input label.\n   */\n  @Prop() label?: string;\n\n  /**\n   * Specifies the name. Submitted with the form name/value pair.\n   */\n  @Prop() name?: string;\n\n  /**\n   * Specifies a short hint that describes the expected value of the input field.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * Indicates whether or not the input field is readonly.\n   */\n  @Prop() readonly?: boolean;\n\n  /**\n   * Indicates whether or not the input field is required.\n   */\n  @Prop() required?: boolean;\n\n  /**\n   * Determines the type of control that will be displayed\n   `'email'`, `'number'`, `'password'`, `'tel'`, `'text'`\n   * @defaultValue \"text\"\n   */\n  @Prop() type = 'text';\n\n  /**\n   * The value of the input.\n   */\n  @Prop({mutable: true}) value?: string;\n\n  /**\n   * Emitted when a keyboard input occurred.\n   */\n  @Event() pdsInput: EventEmitter<InputEvent>;\n\n  private onInputEvent = (ev: Event) => {\n    const input = ev.target as HTMLInputElement | null;\n    if (input) {\n      this.value = input.value || '';\n    }\n    this.pdsInput.emit(ev as InputEvent);\n  };\n\n  render() {\n    return (\n      <Host\n        aria-disabled={this.disabled ? 'true' : null}\n      >\n        <div class=\"pds-input\">\n          <PdsLabel htmlFor={this.componentId} text={this.label} />\n          <input class=\"pds-input__field\"\n            aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n            aria-invalid={this.invalid ? \"true\" : undefined}\n            autocomplete={this.autocomplete}\n            disabled={this.disabled}\n            id={this.componentId}\n            name={this.name}\n            placeholder={this.placeholder}\n            readOnly={this.readonly}\n            required={this.required}\n            type={this.type}\n            value={this.value}\n            onInput={this.onInputEvent}\n          />\n          {this.helperMessage &&\n            <p\n              class=\"pds-input__helper-message\"\n              id={messageId(this.componentId, 'helper')}\n            >\n              {this.helperMessage}\n            </p>\n          }\n          {this.errorMessage &&\n            <p\n              class=\"pds-input__error-message\"\n              id={messageId(this.componentId, 'error')}\n              aria-live=\"assertive\"\n            >\n              {this.errorMessage}\n            </p>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -5,6 +5,7 @@ import { withActions } from '@storybook/addon-actions/decorator';
 export default {
   argTypes: extractArgTypes('pds-input'),
   args: {
+    autocomplete: null,
     disabled: false,
     errorMessage: null,
     helperMessage: null,
@@ -26,6 +27,7 @@ export default {
 }
 
 const BaseTemplate = (args) => html`<pds-input
+  autocomplete="${args.autocomplete}"
   disabled="${args.disabled}"
   error-message="${args.errorMessage}"
   helper-message="${args.helperMessage}"
@@ -108,3 +110,11 @@ Invalid.args = {
   type: 'email',
   value: 'Frank Dux'
 };
+
+export const Autocomplete = BaseTemplate.bind({});
+Autocomplete.args = {
+  componentId: 'pds-input-autocomplete',
+  label: 'First name',
+  type: 'text',
+  autocomplete: 'given-name',
+};

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

@@ -1,16 +1,17 @@
 :host {
   --border-outline: 4px solid var(--pine-color-blue-200);
   --border-radius: var(--pine-border-radius-075);
-  --box-shadow-focus: inset 0 0 0 2px var(--pine-color-blue-200);
-  --color-text-default: var(--pine-color-charcoal-400);
-  --font-size: var(--pine-font-size-100);
-  --font-size-sm: var(--pine-font-size-087);
-  --font-size-xs: var(--pine-font-size-075);
-  --font-weight: var(--pine-font-weight-medium);
-  --spacing-inline-start-margin: var(--pine-spacing-50);
-  --sizing-svg-lg: 15px;
-  --sizing-svg-md: 13px;
-  --sizing-svg-sm: 11px;
+  --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);
+  --color-text-default: var(--pine-color-text-default);
+  --color-text-hover: var(--pine-color-grey-900);
+  --font-size-default: var(--pine-font-size-body-md);
+  --font-size-sm: var(--pine-font-size-body-sm);
+  --font-size-xs: var(--pine-font-size-body-xs);
+  --font-weight: var(--pine-font-weight-body-medium);
+  --spacing-inline-start-margin: var(--pine-spacing-050);
+  --sizing-svg-lg: var(--font-size-default);
+  --sizing-svg-md: var(--font-size-sm);
+  --sizing-svg-sm: var(--font-size-xs);
   display: inline;
 }
 :host pds-icon {
@@ -21,11 +22,12 @@
   align-items: center;
   color: var(--color-text);
   display: inline-flex;
-  font-weight: inherit;
+  font-weight: var(--font-weight);
 }
 .pds-link:focus-visible {
   box-shadow: var(--box-shadow-focus);
   outline: none;
+  position: relative;
 }
 
 .pds-link--sm {
@@ -45,7 +47,7 @@
 }
 
 .pds-link--lg {
-  font-size: var(--font-size);
+  font-size: var(--font-size-default);
 }
 .pds-link--lg pds-icon {
   height: var(--sizing-svg-lg);
@@ -53,10 +55,10 @@
 }
 
 .pds-link--plain {
-  font-weight: var(--font-weight);
   text-decoration: none;
 }
 .pds-link--plain:hover {
+  color: var(--color-text-hover);
   text-decoration: underline;
 }
 
@@ -64,5 +66,6 @@
   text-decoration: underline;
 }
 .pds-link--default:hover {
+  color: var(--color-text-hover);
   text-decoration: none;
 }

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

@@ -23,19 +23,19 @@ export class PdsLink {
         return classNames.join(' ');
     }
     render() {
-        return (h("a", { key: 'de51c27a4c7e3ab6f105f40b683f7c8d1561049c', class: this.classNames(), href: this.href, id: this.componentId, target: this.external ? '_blank' : undefined, part: "link" }, h("slot", { key: '3c4fbcff6544a604d81dd4388a504a902d6ee130' }, this.href), this.external &&
-            h("pds-icon", { key: 'fd1acc513efd16134c062ad3845d44be20a911cf', icon: launch, size: this.fontSize })));
+        return (h("a", { key: '48d18c76dabdf7848cb28406ca41bcb319046f15', class: this.classNames(), href: this.href, id: this.componentId, target: this.external ? '_blank' : undefined, part: "link" }, h("slot", { key: 'd1300abecf3a94cbeb0dd0203e0938496499750b' }, this.href), this.external &&
+            h("pds-icon", { key: '353ee581e0060669910e0e9220f3e85d2c46e41b', icon: launch, size: this.fontSize })));
     }
     static get is() { return "pds-link"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["pds-link.scss"]
+            "$": ["../../global/styles/base.scss", "pds-link.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["pds-link.css"]
+            "$": ["../../global/styles/base.css", "pds-link.css"]
         };
     }
     static get properties() {

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

@@ -1 +1 @@
-{"version":3,"file":"pds-link.js","sourceRoot":"","sources":["../../../src/components/pds-link/pds-link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C;;;GAGG;AAMH,MAAM,OAAO,OAAO;;;wBAUC,KAAK;uBAMc,QAAQ;wBAUP,IAAI;;;IAOnC,UAAU;QAChB,MAAM,UAAU,GAAG,CAAC,UAAU,CAAC,CAAC;QAEhC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,UAAU,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC;QAChD,CAAC;QAED,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,UAAU,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC;QAC/C,CAAC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC9B,CAAC;IAED,MAAM;QAEJ,OAAO,CACL,0DACE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EACxB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAC5C,IAAI,EAAC,MAAM;YAEX,+DAAO,IAAI,CAAC,IAAI,CAAQ;YACvB,IAAI,CAAC,QAAQ;gBACZ,iEAAU,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAa,CAExD,CACL,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\nimport { launch } from '@pine-ds/icons/icons';\n\n/**\n * @part link - The main link element that represents the link component.\n * @slot - Content is placed between the opening closing tags.\n */\n@Component({\n  tag: 'pds-link',\n  styleUrl: 'pds-link.scss',\n  shadow: true,\n})\nexport class PdsLink {\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * When enabled, opens link in a new tab.\n   * @defaultValue false\n   */\n  @Prop() external = false;\n\n  /**\n   *\n   * Modifies the look of the link\n   */\n  @Prop() variant: 'inline' | 'plain' = 'inline';\n\n  /**\n   *\n   * The Font size follows t-shirt model\n   * sm: 12px\n   * md: 14px\n   * lg: 16px\n   * @defaultValue lg\n   */\n  @Prop() fontSize: 'sm' | 'md' | 'lg' = 'lg';\n\n  /**\n   * The URL that the hyperlink points to.\n   */\n  @Prop() href!: string;\n\n  private classNames() {\n    const classNames = ['pds-link'];\n\n    if (this.fontSize) {\n      classNames.push('pds-link--' + this.fontSize);\n    }\n\n    if (this.variant) {\n      classNames.push('pds-link--' + this.variant);\n    }\n\n    return classNames.join(' ');\n  }\n\n  render() {\n\n    return (\n      <a\n        class={this.classNames()}\n        href={this.href}\n        id={this.componentId}\n        target={this.external ? '_blank' : undefined}\n        part=\"link\"\n      >\n        <slot>{this.href}</slot>\n        {this.external &&\n          <pds-icon icon={launch} size={this.fontSize}></pds-icon>\n        }\n      </a>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pds-link.js","sourceRoot":"","sources":["../../../src/components/pds-link/pds-link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C;;;GAGG;AAMH,MAAM,OAAO,OAAO;;;wBAUC,KAAK;uBAMc,QAAQ;wBAUP,IAAI;;;IAOnC,UAAU;QAChB,MAAM,UAAU,GAAG,CAAC,UAAU,CAAC,CAAC;QAEhC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,UAAU,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC;QAChD,CAAC;QAED,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,UAAU,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC;QAC/C,CAAC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC9B,CAAC;IAED,MAAM;QAEJ,OAAO,CACL,0DACE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EACxB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAC5C,IAAI,EAAC,MAAM;YAEX,+DAAO,IAAI,CAAC,IAAI,CAAQ;YACvB,IAAI,CAAC,QAAQ;gBACZ,iEAAU,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAa,CAExD,CACL,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\nimport { launch } from '@pine-ds/icons/icons';\n\n/**\n * @part link - The main link element that represents the link component.\n * @slot - Content is placed between the opening closing tags.\n */\n@Component({\n  tag: 'pds-link',\n  styleUrls: ['../../global/styles/base.scss', 'pds-link.scss'],\n  shadow: true,\n})\nexport class PdsLink {\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * When enabled, opens link in a new tab.\n   * @defaultValue false\n   */\n  @Prop() external = false;\n\n  /**\n   *\n   * Modifies the look of the link\n   */\n  @Prop() variant: 'inline' | 'plain' = 'inline';\n\n  /**\n   *\n   * The Font size follows t-shirt model\n   * sm: 12px\n   * md: 14px\n   * lg: 16px\n   * @defaultValue lg\n   */\n  @Prop() fontSize: 'sm' | 'md' | 'lg' = 'lg';\n\n  /**\n   * The URL that the hyperlink points to.\n   */\n  @Prop() href!: string;\n\n  private classNames() {\n    const classNames = ['pds-link'];\n\n    if (this.fontSize) {\n      classNames.push('pds-link--' + this.fontSize);\n    }\n\n    if (this.variant) {\n      classNames.push('pds-link--' + this.variant);\n    }\n\n    return classNames.join(' ');\n  }\n\n  render() {\n\n    return (\n      <a\n        class={this.classNames()}\n        href={this.href}\n        id={this.componentId}\n        target={this.external ? '_blank' : undefined}\n        part=\"link\"\n      >\n        <slot>{this.href}</slot>\n        {this.external &&\n          <pds-icon icon={launch} size={this.fontSize}></pds-icon>\n        }\n      </a>\n    );\n  }\n}\n"]}

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

@@ -19,7 +19,7 @@
 }
 
 .pds-loader--spinner svg {
-  --color-background-spinner: var(--pine-color-blue-300);
+  --color-background-spinner: var(--pine-color-mercury-400);
   --number-spinner-timing: 2s;
   --number-spinner-path-timing: 1.5s;
   animation: rotate var(--number-spinner-timing) linear infinite;
@@ -39,10 +39,10 @@
 }
 .pds-loader--typing {
   --border-radius-typing: var(--pine-border-radius-200);
-  --border-radius-typing-dot: var(--pine-border-radius-round);
-  --box-shadow-typing: var(--pine-box-shadow-sm);
-  --color-background-typing-default: var(--pine-color-grey-200);
-  --color-background-typing-dot-default: var(--pine-color-grey-500);
+  --border-radius-typing-dot: var(--pine-border-radius-circle);
+  --box-shadow-typing: var(--pine-box-shadow-100);
+  --color-background-typing-default: var(--pine-color-grey-100);
+  --color-background-typing-dot-default: var(--pine-color-grey-400);
   --number-typing-timing: 1s;
   --opacity-typing-dot-default: 0.4;
   --opacity-typing-dot-active: 1;

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

@@ -33,18 +33,18 @@ export class PdsLoader {
         }
     }
     render() {
-        return (h(Host, { key: '325b4512d1455cb90d4897e91453c4ec2370ddcb', 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: 'eed858cd8518769874e7ca6d5265f3e1e77164f3', class: "pds-loader--spinner" }, h("svg", { key: 'fc821517a5923628ef96c8e37b9987c0ba3b987b', style: this.style(), viewBox: "0 0 200 200", fill: "none" }, h("defs", { key: 'f477b8f7be973a6a5b068b6758d6f549404e64c4' }, h("linearGradient", { key: '4979634cfecdca7ef5818f23577b401aa8991389', id: "spinner-secondHalf" }, h("stop", { key: 'ae4667b10205baa8dec8b7affd34d78273ad9667', offset: "0%", "stop-opacity": "0", "stop-color": "currentColor" }), h("stop", { key: '3d66bc5180831487e9e2591cc2b436f9b8cc855e', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" })), h("linearGradient", { key: '1c99e9057a86d4b850348543826fb6da163f4eb9', id: "spinner-firstHalf" }, h("stop", { key: '271c14abb61bb9bc01ac72f43d1cc8580b89b6c0', offset: "0%", "stop-opacity": "1", "stop-color": "currentColor" }), h("stop", { key: '4b8de0ac98a1b44ec3bbba4aa0002957e44c976c', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" }))), h("g", { key: 'b12aaf6168c8428999d020b46c99faf918c45f07', class: "pds-loader__spinner-path" }, h("path", { key: '4443446af5cf8c73d3352fa90d580e914c469028', stroke: "url(#spinner-secondHalf)", d: "M 4 100 A 96 96 0 0 1 196 100" }), h("path", { key: 'ca4edec218d03a74d12ce43a86ef55fbedaea39f', stroke: "url(#spinner-firstHalf)", d: "M 196 100 A 96 96 0 0 1 4 100" }), h("path", { key: 'af6ed9732a9fdd2047f100d2465b27782d2a0b02', stroke: "currentColor", "stroke-linecap": "round", d: "M 4 100 A 96 96 0 0 1 4 98" }))))), this.variant === 'typing' && (h("div", { key: '96aa15066aa426d53481bddd5b665181d9bcd0bd', class: "pds-loader--typing" }, h("span", { key: 'a0bb9722a2dbaf843afc9a50a1f42c46758d1b5e' }), h("span", { key: '0efc9cf2f132f358f58561ccbc7027c57f252df2' }), h("span", { key: 'b8b73b864c7dfefe26ac3aa33099d2f2f3737614' }))), h("div", { key: '3c921244741289e7b67228caedf6e5e13fac1d63', class: `pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}` }, h("slot", { key: '423a30358e6f662a0b80cef445c4a20db3dd36f9', name: "label" }, "Loading..."))));
+        return (h(Host, { key: 'd86c3a84f772eedb15662d0d2e22e53ec7064245', 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: 'ec7cda5951617f46427729e5497c7d1b46562ae0', class: "pds-loader--spinner" }, h("svg", { key: '5a7bc867400981ba2190dd00836af63cd2492e80', style: this.style(), viewBox: "0 0 200 200", fill: "none" }, h("defs", { key: 'ee88cb4c138868b286f017f84925d3cf8226eeb8' }, h("linearGradient", { key: '435c54ff00cf11654e01d3d6932e77e74fdef8ae', id: "spinner-secondHalf" }, h("stop", { key: '4b9b65cde42833c14285f97c7f4b4acb681db89c', offset: "0%", "stop-opacity": "0", "stop-color": "currentColor" }), h("stop", { key: '207b3963322e1f7f54f2b7b42b328e868a9b8e78', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" })), h("linearGradient", { key: 'fc877ee5738a8184227fe022534e9cdfd8e27bd1', id: "spinner-firstHalf" }, h("stop", { key: '3d210b400691e364e9d1214531c86003a7588d2c', offset: "0%", "stop-opacity": "1", "stop-color": "currentColor" }), h("stop", { key: 'e99b0c940dc876637d90c3d86ce87f35e2f82687', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" }))), h("g", { key: 'f2acd79941647de3a5c5aae6383d021d1fad7493', class: "pds-loader__spinner-path" }, h("path", { key: '9f1d64d00c633dc7ff0a0f2173c7f0e0c04198d6', stroke: "url(#spinner-secondHalf)", d: "M 4 100 A 96 96 0 0 1 196 100" }), h("path", { key: 'd5ff2bd47100be8eee961b00102e77b3456e8236', stroke: "url(#spinner-firstHalf)", d: "M 196 100 A 96 96 0 0 1 4 100" }), h("path", { key: 'd7cc6e2da92238c023d322f023e7e437a5d41404', stroke: "currentColor", "stroke-linecap": "round", d: "M 4 100 A 96 96 0 0 1 4 98" }))))), this.variant === 'typing' && (h("div", { key: '3c893dc1ae4f39f2b5873ba46d4ae30f873d1158', class: "pds-loader--typing" }, h("span", { key: '8b38041018e2039fcc19ad3dbce6de3924725cc3' }), h("span", { key: 'b3e827a9fded83368404e8bb5c83306ff6a35979' }), h("span", { key: '41fedabc2db044862892ae68476756c6400a58fa' }))), h("div", { key: 'b4cf5add3094c4824612216b8ca7291a4e40ff08', class: `pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}` }, h("slot", { key: 'c7b10e65a5a5350e7973a49c540907edf44c71fa', name: "label" }, "Loading..."))));
     }
     static get is() { return "pds-loader"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["pds-loader.scss"]
+            "$": ["../../global/styles/base.scss", "pds-loader.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["pds-loader.css"]
+            "$": ["../../global/styles/base.css", "pds-loader.css"]
         };
     }
     static get properties() {

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

@@ -1 +1 @@
-{"version":3,"file":"pds-loader.js","sourceRoot":"","sources":["../../../src/components/pds-loader/pds-loader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;GAEG;AAOH,MAAM,OAAO,SAAS;;QA2CZ,UAAK,GAAG,GAAG,EAAE;YACnB,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;gBAC5B,OAAO;oBACL,MAAM,EAAE,IAAI,CAAC,UAAU,EAAE;oBACzB,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE;iBACzB,CAAC;YACJ,CAAC;QACH,CAAC,CAAC;yBA9C2B,IAAI;yBAKH,KAAK;oBAWxB,IAAI;uBAKyB,SAAS;;IAEzC,UAAU;QAChB,MAAM,KAAK,GAA8B;YACvC,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;SACX,CAAC;QAEF,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;YACrB,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC1B,CAAC;aAAM,CAAC;YACN,OAAO,IAAI,CAAC,IAAI,CAAC;QACnB,CAAC;IACH,CAAC;IAWD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,cAAc,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,oBAAoB,EAAE,iBAAe,CAAC,IAAI,CAAC,SAAS,eAAa,IAAI,CAAC,SAAS,eAAY,QAAQ;YACjJ,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,CAC7B,4DAAK,KAAK,EAAC,qBAAqB;gBAC9B,4DAAK,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,OAAO,EAAC,aAAa,EAAC,IAAI,EAAC,MAAM;oBACzD;wBACE,uEAAgB,EAAE,EAAC,oBAAoB;4BACrC,6DAAM,MAAM,EAAC,IAAI,kBAAc,GAAG,gBAAY,cAAc,GAAG;4BAC/D,6DAAM,MAAM,EAAC,MAAM,kBAAc,KAAK,gBAAY,cAAc,GAAG,CACpD;wBACjB,uEAAgB,EAAE,EAAC,mBAAmB;4BACpC,6DAAM,MAAM,EAAC,IAAI,kBAAc,GAAG,gBAAY,cAAc,GAAG;4BAC/D,6DAAM,MAAM,EAAC,MAAM,kBAAc,KAAK,gBAAY,cAAc,GAAG,CACpD,CACZ;oBAEP,0DAAG,KAAK,EAAC,0BAA0B;wBACjC,6DAAM,MAAM,EAAC,0BAA0B,EAAC,CAAC,EAAC,+BAA+B,GAAG;wBAC5E,6DAAM,MAAM,EAAC,yBAAyB,EAAC,CAAC,EAAC,+BAA+B,GAAG;wBAE3E,6DAAM,MAAM,EAAC,cAAc,oBAAgB,OAAO,EAAC,CAAC,EAAC,4BAA4B,GAAG,CAClF,CACA,CACF,CACP;YAEA,IAAI,CAAC,OAAO,KAAK,QAAQ,IAAI,CAC5B,4DAAK,KAAK,EAAC,oBAAoB;gBAC7B,8DAAa;gBACb,8DAAa;gBACb,8DAAa,CACT,CACP;YAED,4DAAK,KAAK,EAAE,qBAAqB,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,oBAAoB,EAAE;gBAC3E,6DAAM,IAAI,EAAC,OAAO,iBAAkB,CAChC,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\n\n/**\n * @slot label - Default slot for Loader label text.\n */\n\n@Component({\n  tag: 'pds-loader',\n  styleUrl: 'pds-loader.scss',\n  shadow: true,\n})\nexport class PdsLoader {\n  /**\n   * If false, the loader will be hidden.\n   */\n  @Prop() isLoading: boolean = true;\n\n  /**\n   * Determines whether the loader should display a label.\n   */\n  @Prop() showLabel?: boolean = false;\n\n  /**\n   * Sets the size of the spinner loader. Value can be preset or custom.\n   */\n  @Prop({ reflect: true }) size?:\n  | 'xs' // 24px\n  | 'sm' // 32px\n  | 'md' // 48px\n  | 'lg' // 64px\n  | 'xl' // 80px\n  | string = 'md';\n\n  /**\n   * Determines the type of loader.\n   */\n  @Prop() variant: 'spinner' | 'typing' = 'spinner';\n\n  private loaderSize() {\n    const sizes: { [key: string]: string } = {\n      xs: '24px',\n      sm: '32px',\n      md: '48px',\n      lg: '64px',\n      xl: '80px',\n    };\n\n    if (sizes[this.size]) {\n      return sizes[this.size];\n    } else {\n      return this.size;\n    }\n  }\n\n  private style = () => {\n    if (this.size !== undefined) {\n      return {\n        height: this.loaderSize(),\n        width: this.loaderSize(),\n      };\n    }\n  };\n\n  render() {\n    return (\n      <Host class={`pds-loader ${this.isLoading ? '' : 'pds-loader--hidden'}`} aria-hidden={!this.isLoading} aria-busy={this.isLoading} aria-live=\"polite\">\n        {this.variant === 'spinner' && (\n          <div class=\"pds-loader--spinner\">\n            <svg style={this.style()} viewBox=\"0 0 200 200\" fill=\"none\">\n              <defs>\n                <linearGradient id=\"spinner-secondHalf\">\n                  <stop offset=\"0%\" stop-opacity=\"0\" stop-color=\"currentColor\" />\n                  <stop offset=\"100%\" stop-opacity=\"0.5\" stop-color=\"currentColor\" />\n                </linearGradient>\n                <linearGradient id=\"spinner-firstHalf\">\n                  <stop offset=\"0%\" stop-opacity=\"1\" stop-color=\"currentColor\" />\n                  <stop offset=\"100%\" stop-opacity=\"0.5\" stop-color=\"currentColor\" />\n                </linearGradient>\n              </defs>\n\n              <g class=\"pds-loader__spinner-path\">\n                <path stroke=\"url(#spinner-secondHalf)\" d=\"M 4 100 A 96 96 0 0 1 196 100\" />\n                <path stroke=\"url(#spinner-firstHalf)\" d=\"M 196 100 A 96 96 0 0 1 4 100\" />\n\n                <path stroke=\"currentColor\" stroke-linecap=\"round\" d=\"M 4 100 A 96 96 0 0 1 4 98\" />\n              </g>\n            </svg>\n          </div>\n        )}\n\n        {this.variant === 'typing' && (\n          <div class=\"pds-loader--typing\">\n            <span></span>\n            <span></span>\n            <span></span>\n          </div>\n        )}\n\n        <div class={`pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}`}>\n          <slot name=\"label\">Loading...</slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pds-loader.js","sourceRoot":"","sources":["../../../src/components/pds-loader/pds-loader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;GAEG;AAOH,MAAM,OAAO,SAAS;;QA2CZ,UAAK,GAAG,GAAG,EAAE;YACnB,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;gBAC5B,OAAO;oBACL,MAAM,EAAE,IAAI,CAAC,UAAU,EAAE;oBACzB,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE;iBACzB,CAAC;YACJ,CAAC;QACH,CAAC,CAAC;yBA9C2B,IAAI;yBAKH,KAAK;oBAWxB,IAAI;uBAKyB,SAAS;;IAEzC,UAAU;QAChB,MAAM,KAAK,GAA8B;YACvC,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;SACX,CAAC;QAEF,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;YACrB,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC1B,CAAC;aAAM,CAAC;YACN,OAAO,IAAI,CAAC,IAAI,CAAC;QACnB,CAAC;IACH,CAAC;IAWD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,cAAc,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,oBAAoB,EAAE,iBAAe,CAAC,IAAI,CAAC,SAAS,eAAa,IAAI,CAAC,SAAS,eAAY,QAAQ;YACjJ,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,CAC7B,4DAAK,KAAK,EAAC,qBAAqB;gBAC9B,4DAAK,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,OAAO,EAAC,aAAa,EAAC,IAAI,EAAC,MAAM;oBACzD;wBACE,uEAAgB,EAAE,EAAC,oBAAoB;4BACrC,6DAAM,MAAM,EAAC,IAAI,kBAAc,GAAG,gBAAY,cAAc,GAAG;4BAC/D,6DAAM,MAAM,EAAC,MAAM,kBAAc,KAAK,gBAAY,cAAc,GAAG,CACpD;wBACjB,uEAAgB,EAAE,EAAC,mBAAmB;4BACpC,6DAAM,MAAM,EAAC,IAAI,kBAAc,GAAG,gBAAY,cAAc,GAAG;4BAC/D,6DAAM,MAAM,EAAC,MAAM,kBAAc,KAAK,gBAAY,cAAc,GAAG,CACpD,CACZ;oBAEP,0DAAG,KAAK,EAAC,0BAA0B;wBACjC,6DAAM,MAAM,EAAC,0BAA0B,EAAC,CAAC,EAAC,+BAA+B,GAAG;wBAC5E,6DAAM,MAAM,EAAC,yBAAyB,EAAC,CAAC,EAAC,+BAA+B,GAAG;wBAE3E,6DAAM,MAAM,EAAC,cAAc,oBAAgB,OAAO,EAAC,CAAC,EAAC,4BAA4B,GAAG,CAClF,CACA,CACF,CACP;YAEA,IAAI,CAAC,OAAO,KAAK,QAAQ,IAAI,CAC5B,4DAAK,KAAK,EAAC,oBAAoB;gBAC7B,8DAAa;gBACb,8DAAa;gBACb,8DAAa,CACT,CACP;YAED,4DAAK,KAAK,EAAE,qBAAqB,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,oBAAoB,EAAE;gBAC3E,6DAAM,IAAI,EAAC,OAAO,iBAAkB,CAChC,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\n\n/**\n * @slot label - Default slot for Loader label text.\n */\n\n@Component({\n  tag: 'pds-loader',\n  styleUrls: ['../../global/styles/base.scss', 'pds-loader.scss'],\n  shadow: true,\n})\nexport class PdsLoader {\n  /**\n   * If false, the loader will be hidden.\n   */\n  @Prop() isLoading: boolean = true;\n\n  /**\n   * Determines whether the loader should display a label.\n   */\n  @Prop() showLabel?: boolean = false;\n\n  /**\n   * Sets the size of the spinner loader. Value can be preset or custom.\n   */\n  @Prop({ reflect: true }) size?:\n  | 'xs' // 24px\n  | 'sm' // 32px\n  | 'md' // 48px\n  | 'lg' // 64px\n  | 'xl' // 80px\n  | string = 'md';\n\n  /**\n   * Determines the type of loader.\n   */\n  @Prop() variant: 'spinner' | 'typing' = 'spinner';\n\n  private loaderSize() {\n    const sizes: { [key: string]: string } = {\n      xs: '24px',\n      sm: '32px',\n      md: '48px',\n      lg: '64px',\n      xl: '80px',\n    };\n\n    if (sizes[this.size]) {\n      return sizes[this.size];\n    } else {\n      return this.size;\n    }\n  }\n\n  private style = () => {\n    if (this.size !== undefined) {\n      return {\n        height: this.loaderSize(),\n        width: this.loaderSize(),\n      };\n    }\n  };\n\n  render() {\n    return (\n      <Host class={`pds-loader ${this.isLoading ? '' : 'pds-loader--hidden'}`} aria-hidden={!this.isLoading} aria-busy={this.isLoading} aria-live=\"polite\">\n        {this.variant === 'spinner' && (\n          <div class=\"pds-loader--spinner\">\n            <svg style={this.style()} viewBox=\"0 0 200 200\" fill=\"none\">\n              <defs>\n                <linearGradient id=\"spinner-secondHalf\">\n                  <stop offset=\"0%\" stop-opacity=\"0\" stop-color=\"currentColor\" />\n                  <stop offset=\"100%\" stop-opacity=\"0.5\" stop-color=\"currentColor\" />\n                </linearGradient>\n                <linearGradient id=\"spinner-firstHalf\">\n                  <stop offset=\"0%\" stop-opacity=\"1\" stop-color=\"currentColor\" />\n                  <stop offset=\"100%\" stop-opacity=\"0.5\" stop-color=\"currentColor\" />\n                </linearGradient>\n              </defs>\n\n              <g class=\"pds-loader__spinner-path\">\n                <path stroke=\"url(#spinner-secondHalf)\" d=\"M 4 100 A 96 96 0 0 1 196 100\" />\n                <path stroke=\"url(#spinner-firstHalf)\" d=\"M 196 100 A 96 96 0 0 1 4 100\" />\n\n                <path stroke=\"currentColor\" stroke-linecap=\"round\" d=\"M 4 100 A 96 96 0 0 1 4 98\" />\n              </g>\n            </svg>\n          </div>\n        )}\n\n        {this.variant === 'typing' && (\n          <div class=\"pds-loader--typing\">\n            <span></span>\n            <span></span>\n            <span></span>\n          </div>\n        )}\n\n        <div class={`pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}`}>\n          <slot name=\"label\">Loading...</slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,5 +1,5 @@
 :host {
-  --color-progress-fill: var(--pine-color-blue-300);
+  --color-progress-fill: var(--pine-color-mercury-500);
   --sizing-progress-bar-height: 8px;
   --sizing-progress-bar-width: 100%;
   align-items: center;
@@ -17,7 +17,7 @@
 }
 .pds-progress {
   --border-radius: var(--pine-border-radius-050);
-  --color-progress-bar-background: var(--pine-color-grey-300);
+  --color-progress-bar-background: var(--pine-color-grey-200);
   align-items: center;
   background-color: var(--color-progress-bar-background);
   border-radius: var(--border-radius);
@@ -44,14 +44,14 @@ progress::-webkit-progress-bar {
 
 progress::-webkit-progress-value {
   --border-radius: var(--pine-border-radius-050);
-  --color-background: var(--pine-color-blue-300);
+  --color-background: var(--pine-color-mercury-500);
   background-color: var(--color-progress-fill, var(--color-background));
   border-radius: var(--border-radius);
 }
 
 progress::-moz-progress-bar {
-  --color-background: var(--pine-color-blue-300);
   --border-radius: var(--pine-border-radius-050);
+  --color-background: var(--pine-color-mercury-500);
   background-color: var(--color-progress-fill, var(--color-background));
   border-radius: var(--border-radius);
 }
@@ -68,12 +68,8 @@ progress::-moz-progress-bar {
 }
 
 .pds-progress__percentage {
-  --font-size: var(--pine-font-size-087);
   --font-weight: var(--pine-font-weight-medium);
-  --line-height: var(--pine-line-height-150);
   --spacing-inline-start-margin: var(--pine-spacing-300);
-  font-size: var(--font-size);
   font-weight: var(--font-weight);
-  line-height: var(--line-height);
   margin-inline-start: calc(var(--spacing-inline-start-margin) / 2);
 }

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

@@ -9,18 +9,18 @@ export class PdsProgress {
         this.showPercent = false;
     }
     render() {
-        return (h(Host, { key: 'a11c3d67af0621981d2f13ad673e11999926b3c1', class: this.animated ? { 'is-animated': this.animated } : '' }, h("div", { key: 'bb480c5ce1fc9c56fce1022a26783d5729eb30dc', class: "pds-progress" }, h("label", { key: '02fec27f268262889b514aef4d8344bbb9a9484c', class: "pds-progress__label", htmlFor: this.componentId }, this.label), h("progress", { key: '122d2639d7630f28fd98adf9bc003eeed6c9ebef', id: this.componentId, max: "100", style: this.fillColor ? { '--color-progress-fill': this.fillColor } : {}, value: this.percent })), this.showPercent && h("div", { key: 'ba7262e0627a2848b3da03a9a32882510bf2628c', class: "pds-progress__percentage" }, this.percent, "%")));
+        return (h(Host, { key: 'abd4f8e7972ff974b671831e38ae821a01bbc519', class: this.animated ? { 'is-animated': this.animated } : '' }, h("div", { key: 'b6afe1b42ccf8f346c88648276d1e991fe41fd91', class: "pds-progress" }, h("label", { key: '676f91cdc74a861005cc7a25f811d51212641ee1', class: "pds-progress__label", htmlFor: this.componentId }, this.label), h("progress", { key: '5f0154648ba27c6d83bd9fd3d7c3b59597665b1c', id: this.componentId, max: "100", style: this.fillColor ? { '--color-progress-fill': this.fillColor } : {}, value: this.percent })), this.showPercent && h("div", { key: 'a538abd09affcb043a215c2ca504a9cbbe500332', class: "pds-progress__percentage" }, this.percent, "%")));
     }
     static get is() { return "pds-progress"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["pds-progress.scss"]
+            "$": ["../../global/styles/base.scss", "pds-progress.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["pds-progress.css"]
+            "$": ["../../global/styles/base.css", "pds-progress.css"]
         };
     }
     static get properties() {

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

@@ -1 +1 @@
-{"version":3,"file":"pds-progress.js","sourceRoot":"","sources":["../../../src/components/pds-progress/pds-progress.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,WAAW;;wBAKH,KAAK;;;;uBAsBN,CAAC;2BAMG,KAAK;;IAE3B,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,aAAa,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE;YAChE,4DAAK,KAAK,EAAC,cAAc;gBACvB,8DAAO,KAAK,EAAC,qBAAqB,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,IACzD,IAAI,CAAC,KAAK,CACL;gBACR,iEACE,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,GAAG,EAAC,KAAK,EACT,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,uBAAuB,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,EACxE,KAAK,EAAE,IAAI,CAAC,OAAO,GAEV,CACP;YACL,IAAI,CAAC,WAAW,IAAI,4DAAK,KAAK,EAAC,0BAA0B;gBAAE,IAAI,CAAC,OAAO;oBAAQ,CAC3E,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'pds-progress',\n  styleUrl: 'pds-progress.scss',\n  shadow: true,\n})\nexport class PdsProgress {\n  /**\n  * Determines whether or not progress is animated.\n  * @defaultValue false\n  */\n  @Prop() animated = 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  * Sets the progress fill color. Accepts a color token or a [valid color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).\n  * @defaultValue 'var(--pine-color-blue-300)'\n  */\n  @Prop() fillColor: string;\n\n  /**\n  * String used for label text. Label is visually hidden but required for better accessibility.\n  */\n  @Prop() label!: string;\n\n  /**\n  * Sets the progress fill pecentage and visually displayed when `show-percentage=true`.\n  * @defaultValue 0\n  */\n  @Prop() percent = 0;\n\n  /**\n  * Determines whether or not the percent value should be displayed as text.\n  * @defaultValue false\n  */\n  @Prop() showPercent = false;\n\n  render() {\n    return (\n      <Host class={this.animated ? { 'is-animated': this.animated } : ''}>\n        <div class=\"pds-progress\">\n          <label class=\"pds-progress__label\" htmlFor={this.componentId}>\n            {this.label}\n          </label>\n          <progress\n            id={this.componentId}\n            max=\"100\"\n            style={this.fillColor ? { '--color-progress-fill': this.fillColor } : {}}\n            value={this.percent}\n          >\n          </progress>\n        </div>\n        {this.showPercent && <div class=\"pds-progress__percentage\">{this.percent}%</div>}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pds-progress.js","sourceRoot":"","sources":["../../../src/components/pds-progress/pds-progress.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,WAAW;;wBAKH,KAAK;;;;uBAsBN,CAAC;2BAMG,KAAK;;IAE3B,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,aAAa,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE;YAChE,4DAAK,KAAK,EAAC,cAAc;gBACvB,8DAAO,KAAK,EAAC,qBAAqB,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,IACzD,IAAI,CAAC,KAAK,CACL;gBACR,iEACE,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,GAAG,EAAC,KAAK,EACT,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,uBAAuB,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,EACxE,KAAK,EAAE,IAAI,CAAC,OAAO,GAEV,CACP;YACL,IAAI,CAAC,WAAW,IAAI,4DAAK,KAAK,EAAC,0BAA0B;gBAAE,IAAI,CAAC,OAAO;oBAAQ,CAC3E,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'pds-progress',\n  styleUrls: ['../../global/styles/base.scss', 'pds-progress.scss'],\n  shadow: true,\n})\nexport class PdsProgress {\n  /**\n  * Determines whether or not progress is animated.\n  * @defaultValue false\n  */\n  @Prop() animated = 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  * Sets the progress fill color. Accepts a color token or a [valid color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).\n  * @defaultValue 'var(--pine-color-blue-300)'\n  */\n  @Prop() fillColor: string;\n\n  /**\n  * String used for label text. Label is visually hidden but required for better accessibility.\n  */\n  @Prop() label!: string;\n\n  /**\n  * Sets the progress fill pecentage and visually displayed when `show-percentage=true`.\n  * @defaultValue 0\n  */\n  @Prop() percent = 0;\n\n  /**\n  * Determines whether or not the percent value should be displayed as text.\n  * @defaultValue false\n  */\n  @Prop() showPercent = false;\n\n  render() {\n    return (\n      <Host class={this.animated ? { 'is-animated': this.animated } : ''}>\n        <div class=\"pds-progress\">\n          <label class=\"pds-progress__label\" htmlFor={this.componentId}>\n            {this.label}\n          </label>\n          <progress\n            id={this.componentId}\n            max=\"100\"\n            style={this.fillColor ? { '--color-progress-fill': this.fillColor } : {}}\n            value={this.percent}\n          >\n          </progress>\n        </div>\n        {this.showPercent && <div class=\"pds-progress__percentage\">{this.percent}%</div>}\n      </Host>\n    );\n  }\n}\n"]}