@pine-ds/core 0.2.3 → 1.0.0

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

@@ -1,15 +1,15 @@
 :host {
-  --background-color: var(--pine-color-neutral-grey-400);
-  --offset-xxs: var(--pine-spacing-xxs);
-  --offset-xs: var(--pine-spacing-xs);
-  --offset-sm: var(--pine-spacing-sm);
-  --offset-md: var(--pine-spacing-md);
-  --offset-lg: var(--pine-spacing-lg);
-  --offset-xxl: var(--pine-spacing-2xl);
+  --color-background-default: var(--pine-color-grey-400);
+  --spacing-offset-xxs: var(--pine-spacing-050);
+  --spacing-offset-xs: var(--pine-spacing-100);
+  --spacing-offset-sm: var(--pine-spacing-200);
+  --spacing-offset-md: var(--pine-spacing-300);
+  --spacing-offset-lg: var(--pine-spacing-450);
+  --spacing-offset-xxl: var(--pine-spacing-800);
 }
 
 .pds-divider {
-  background: var(--background-color);
+  background: var(--color-background-default);
   border: 0;
   display: flex;
   height: 1px;
@@ -23,66 +23,66 @@
 }
 
 .pds-divider--offset-xxs {
-  margin: 0 calc(var(--offset-xxs) * -1);
-  padding: 0 var(--offset-xxs);
+  margin: 0 calc(var(--spacing-offset-xxs) * -1);
+  padding: 0 var(--spacing-offset-xxs);
 }
 .pds-divider--offset-xxs.pds-divider--vertical {
-  margin: calc(var(--offset-xxs) * -1) 0;
-  padding: var(--offset-xxs) 0;
+  margin: calc(var(--spacing-offset-xxs) * -1) 0;
+  padding: var(--spacing-offset-xxs) 0;
 }
 
 .pds-divider--offset-xs {
-  margin: 0 calc(var(--offset-xs) * -1);
-  padding: 0 var(--offset-xs);
+  margin: 0 calc(var(--spacing-offset-xs) * -1);
+  padding: 0 var(--spacing-offset-xs);
 }
 .pds-divider--offset-xs.pds-divider--vertical {
-  margin: calc(var(--offset-xs) * -1) 0;
-  padding: var(--offset-xs) 0;
+  margin: calc(var(--spacing-offset-xs) * -1) 0;
+  padding: var(--spacing-offset-xs) 0;
 }
 
 .pds-divider--offset-sm {
-  margin: 0 calc(var(--offset-sm) * -1);
-  padding: 0 var(--offset-sm);
+  margin: 0 calc(var(--spacing-offset-sm) * -1);
+  padding: 0 var(--spacing-offset-sm);
 }
 .pds-divider--offset-sm.pds-divider--vertical {
-  margin: calc(var(--offset-sm) * -1) 0;
-  padding: var(--offset-sm) 0;
+  margin: calc(var(--spacing-offset-sm) * -1) 0;
+  padding: var(--spacing-offset-sm) 0;
 }
 
 .pds-divider--offset-md {
-  margin: 0 calc(var(--offset-md) * -1);
-  padding: 0 var(--offset-md);
+  margin: 0 calc(var(--spacing-offset-md) * -1);
+  padding: 0 var(--spacing-offset-md);
 }
 .pds-divider--offset-md.pds-divider--vertical {
-  margin: calc(var(--offset-md) * -1) 0;
-  padding: var(--offset-md) 0;
+  margin: calc(var(--spacing-offset-md) * -1) 0;
+  padding: var(--spacing-offset-md) 0;
 }
 
 .pds-divider--offset-lg {
-  margin: 0 calc(var(--offset-lg) * -1);
-  padding: 0 var(--offset-lg);
+  margin: 0 calc(var(--spacing-offset-lg) * -1);
+  padding: 0 var(--spacing-offset-lg);
 }
 .pds-divider--offset-lg.pds-divider--vertical {
-  margin: calc(var(--offset-lg) * -1) 0;
-  padding: var(--offset-lg) 0;
+  margin: calc(var(--spacing-offset-lg) * -1) 0;
+  padding: var(--spacing-offset-lg) 0;
 }
 
 .pds-divider--offset-xl {
-  margin: 0 calc(var(--offset-xl) * -1);
-  padding: 0 var(--offset-xl);
+  margin: 0 calc(var(--spacing-offset-xl) * -1);
+  padding: 0 var(--spacing-offset-xl);
 }
 .pds-divider--offset-xl.pds-divider--vertical {
-  margin: calc(var(--offset-xl) * -1) 0;
-  padding: var(--offset-xl) 0;
+  margin: calc(var(--spacing-offset-xl) * -1) 0;
+  padding: var(--spacing-offset-xl) 0;
 }
 
 .pds-divider--offset-xxl {
-  margin: 0 calc(var(--offset-xxl) * -1);
-  padding: 0 var(--offset-xxl);
+  margin: 0 calc(var(--spacing-offset-xxl) * -1);
+  padding: 0 var(--spacing-offset-xxl);
 }
 .pds-divider--offset-xxl.pds-divider--vertical {
-  margin: calc(var(--offset-xxl) * -1) 0;
-  padding: var(--offset-xxl) 0;
+  margin: calc(var(--spacing-offset-xxl) * -1) 0;
+  padding: var(--spacing-offset-xxl) 0;
 }
 
 @media (max-width: 767px) {

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

@@ -17,7 +17,7 @@ export class PdsDivider {
         return classNames.join(' ');
     }
     render() {
-        return (h(Host, { key: 'd5d42d70c2417e0fc801f87f8460557bb1756443', id: this.componentId }, h("hr", { key: '49554a46b6949d09adc4794b22441a1f76eb1d13', class: this.classNames() })));
+        return (h(Host, { key: '3f2301abdcc69f48039e92ad5308ea7a27b3573f', id: this.componentId }, h("hr", { key: '763d4a15811b9298b77d0e6227e18dccdf61825e', class: this.classNames() })));
     }
     static get is() { return "pds-divider"; }
     static get encapsulation() { return "shadow"; }

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

@@ -2,12 +2,12 @@
   /**
    * @prop --image-aspect-ratio: The image's aspect ratio.
   */
-  --image-aspect-ratio: auto;
+  --dimension-aspect-ratio: auto;
   display: inline-block;
 }
 
 img {
-  aspect-ratio: var(--image-aspect-ratio);
+  aspect-ratio: var(--dimension-aspect-ratio);
   height: auto;
   width: 100%;
 }

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

@@ -11,9 +11,9 @@ export class PdsImage {
         this.width = undefined;
     }
     render() {
-        return (h(Host, { key: '835f04e58f7a7f831575512bb4582fc22a563652', class: {
+        return (h(Host, { key: '8d97b63e1c5b0eb72117d6378a0b6d869c0dbdea', class: {
                 'pds-image': true,
-            }, id: this.componentId }, h("img", { key: 'd002c0ae968a6a4a8d965c9bbae905da31629d7f', 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: '3cc2d1c185244c8e8de2f7258b85194b37a4ff38', alt: this.alt, height: this.height, loading: this.loading, sizes: this.sizes, src: this.src, srcset: this.srcset, width: this.width })));
     }
     static get is() { return "pds-image"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,26 +1,26 @@
 :host {
-  --background: var(--pine-color-base-white);
-  --background-disabled: var(--pine-color-neutral-grey-100);
-  --color: var(--pine-color-neutral-charcoal-500);
-  --color-error: var(--pine-color-red-300);
-  --color-placeholder: var(--pine-color-neutral-charcoal-200);
-  --color-disabled: var(--pine-color-neutral-grey-500);
-  --border-color-default: var(--pine-color-neutral-grey-400);
-  --border-color-hover: var(--pine-color-neutral-grey-500);
-  --focus-box-shadow: 0 0 0 4px var(--pine-color-primary-200);
-  --label-font-size: var(--pine-font-size-body);
-  --label-font-weight: var(--pine-font-weight-medium);
-  --label-line-height: var(--pine-line-height-md);
-  --label-margin-block-end: var(--pine-spacing-xs);
-  --field-font-size: var(--pine-font-size-body);
-  --field-font-weight: var(--pine-font-weight-regular);
-  --field-line-height: var(--pine-line-height-md);
-  --field-padding-block: var(--pine-spacing-xs);
-  --field-padding-inline: var(--pine-spacing-sm);
-  --helper-message-font-size: var(--pine-font-size-body);
-  --helper-message-font-weight: var(--pine-font-weight-regular);
-  --helper-message-line-height: var(--pine-line-height-sm);
-  --helper-message-margin-top: var(--pine-spacing-xs);
+  --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);
+  --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-border-hover: var(--pine-color-grey-500);
+  --color-disabled-text: var(--pine-color-grey-500);
+  --color-placeholder-text: var(--pine-color-charcoal-200);
+  --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);
+  --font-weight-helper-message: var(--pine-font-weight-normal);
+  --font-weight-input-field: var(--pine-font-weight-normal);
+  --font-weight-label: var(--pine-font-weight-medium);
+  --line-height-label: var(--pine-line-height-150);
+  --line-height-helper-message: var(--pine-line-height-125);
+  --line-height-input-field: var(--pine-line-height-150);
+  --spacing-field-padding-block: var(--pine-spacing-100);
+  --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);
   display: inline;
 }
 
@@ -30,57 +30,61 @@
 }
 
 label {
-  font-size: var(--label-font-size);
-  font-weight: var(--label-font-weight);
-  line-height: var(--label-line-height);
-  margin-block-end: var(--label-margin-block-end);
+  font-size: var(--font-size-label);
+  font-weight: var(--font-weight-label);
+  line-height: var(--line-height-label);
+  margin-block-end: var(--spacing-label-margin-block-end);
 }
 
 input {
-  border: 1px solid var(--border-color-default);
+  border: 1px solid var(--color-border-default);
   border-radius: 10px;
-  font-size: var(--field-font-size);
-  font-weight: var(--field-font-weight);
-  line-height: var(--field-line-height);
-  padding: var(--field-padding-block) var(--field-padding-inline);
+  font-size: var(--font-size-input-field);
+  font-weight: var(--font-weight-input-field);
+  line-height: var(--line-height-input-field);
+  padding: var(--spacing-field-padding-block) var(--spacing-input-field-padding-inline);
   /* stylelint-disable */
   /* stylelint-enable */
 }
 input:disabled {
-  background-color: var(--background-disabled);
-  color: var(--color-disabled);
+  background-color: var(--color-background-disabled);
+  color: var(--color-disabled-text);
   cursor: not-allowed;
 }
 input:hover {
-  border-color: var(--border-color-hover);
+  border-color: var(--color-border-hover);
 }
-input:focus {
-  box-shadow: var(--focus-box-shadow);
+input:focus-visible {
+  box-shadow: var(--box-shadow-focus);
   outline: none;
 }
 input::-webkit-input-placeholder {
-  color: var(--color-placeholder);
+  color: var(--color-placeholder-text);
 }
 input::-moz-placeholder {
-  color: var(--color-placeholder);
+  color: var(--color-placeholder-text);
 }
 input::-moz-placeholder {
-  color: var(--color-placeholder);
+  color: var(--color-placeholder-text);
 }
 input:-ms-input-placeholder {
-  color: var(--color-placeholder);
+  color: var(--color-placeholder-text);
 }
 input:has(~ .pds-input__error-message) {
-  border-color: var(--color-error);
+  border-color: var(--color-border-error);
+}
+input:has(~ .pds-input__error-message):focus-visible {
+  box-shadow: var(--box-shadow-focus-error);
+  outline: none;
 }
 
 .pds-input__error-message,
 .pds-input__helper-message {
-  font-size: var(--helper-message-font-size);
-  font-weight: var(--helper-message-font-weight);
-  line-height: var(--helper-message-line-height);
+  font-size: var(--font-size-helper-message);
+  font-weight: var(--font-weight-helper-message);
+  line-height: var(--line-height-helper-message);
   margin-block-end: 0;
-  margin-block-start: var(--helper-message-margin-top);
+  margin-block-start: var(--spacing-margin-top-helper-message);
 }
 
 .pds-input__error-message {

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

@@ -24,9 +24,9 @@ export class PdsInput {
         this.value = undefined;
     }
     render() {
-        return (h(Host, { key: 'bb6e9f4cb7515c3b8fbbc583ba1c9ade05d8ae90', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: '960462be7a176c6b62412ce4b44af79f9b137a0c', class: "pds-input" }, h(PdsLabel, { key: 'beb8f1c8e8a1b4b692d2838abc99e427cc13c392', htmlFor: this.componentId, text: this.label }), h("input", { key: 'c69ceb5d687fb37b843e71e8aa9bad8b9f7bcaa8', 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", { class: "pds-input__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            h("p", { class: "pds-input__error-message", id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, this.errorMessage))));
+        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))));
     }
     static get is() { return "pds-input"; }
     static get encapsulation() { return "shadow"; }

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,SACE,KAAK,EAAC,2BAA2B,EACjC,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,IAExC,IAAI,CAAC,aAAa,CACjB;gBAEL,IAAI,CAAC,YAAY;oBAChB,SACE,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;;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"]}

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

@@ -1,25 +1,25 @@
 :host {
-  --border-radius: var(--pine-border-radius-sm);
-  --box-shadow-focus: inset 0 0 0 2px var(--pine-color-primary-200);
-  --color: var(--pine-color-neutral-charcoal-400);
-  --font-size: var(--pine-font-size-body);
-  --font-size-sm: var(--pine-font-size-body-sm);
-  --font-size-xs: var(--pine-font-size-body-xs);
+  --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);
-  --margin-inline-start: var(--pine-spacing-xxs);
-  --outline: 4px solid var(--pine-color-primary-200);
-  --svg-lg: 15px;
-  --svg-md: 13px;
-  --svg-sm: 11px;
+  --spacing-inline-start-margin: var(--pine-spacing-050);
+  --sizing-svg-lg: 15px;
+  --sizing-svg-md: 13px;
+  --sizing-svg-sm: 11px;
   display: inline;
 }
 :host pds-icon {
-  margin-inline-start: var(--margin-inline-start);
+  margin-inline-start: var(--spacing-inline-start-margin);
 }
 
 .pds-link {
   align-items: center;
-  color: var(--color);
+  color: var(--color-text);
   display: inline-flex;
   font-weight: inherit;
 }
@@ -32,24 +32,24 @@
   font-size: var(--font-size-xs);
 }
 .pds-link--sm pds-icon {
-  height: var(--svg-sm);
-  width: var(--svg-sm);
+  height: var(--sizing-svg-sm);
+  width: var(--sizing-svg-sm);
 }
 
 .pds-link--md {
   font-size: var(--font-size-sm);
 }
 .pds-link--md pds-icon {
-  height: var(--svg-md);
-  width: var(--svg-md);
+  height: var(--sizing-svg-md);
+  width: var(--sizing-svg-md);
 }
 
 .pds-link--lg {
   font-size: var(--font-size);
 }
 .pds-link--lg pds-icon {
-  height: var(--svg-lg);
-  width: var(--svg-lg);
+  height: var(--sizing-svg-lg);
+  width: var(--sizing-svg-lg);
 }
 
 .pds-link--plain {

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

@@ -23,8 +23,8 @@ export class PdsLink {
         return classNames.join(' ');
     }
     render() {
-        return (h("a", { key: '72e9712a881a175bab71e2d9beb2d0307582bde3', class: this.classNames(), href: this.href, id: this.componentId, target: this.external ? '_blank' : undefined, part: "link" }, h("slot", { key: '13f8e29adcfc55e7aeb62bd5e67105ce4d21eca7' }, this.href), this.external &&
-            h("pds-icon", { icon: launch, size: this.fontSize })));
+        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 })));
     }
     static get is() { return "pds-link"; }
     static get encapsulation() { return "shadow"; }

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,gBAAU,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  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"]}

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

@@ -1,8 +1,10 @@
 :host {
-  --progress-fill-color: var(--pine-color-primary-300);
-  --height-progress-bar: 8px;
+  --color-progress-fill: var(--pine-color-blue-300);
+  --sizing-progress-bar-height: 8px;
+  --sizing-progress-bar-width: 100%;
   align-items: center;
   display: flex;
+  width: var(--sizing-progress-bar-width);
 }
 
 @keyframes progressBar {
@@ -10,18 +12,18 @@
     width: 0;
   }
   100% {
-    width: 100%;
+    width: var(--sizing-progress-bar-width);
   }
 }
 .pds-progress {
-  --background-progress-bar: var(--pine-color-neutral-grey-300);
-  --border-radius: var(--pine-border-radius-xs);
+  --border-radius: var(--pine-border-radius-050);
+  --color-progress-bar-background: var(--pine-color-grey-300);
   align-items: center;
-  background-color: var(--background-progress-bar);
+  background-color: var(--color-progress-bar-background);
   border-radius: var(--border-radius);
   display: flex;
   flex-direction: row;
-  height: var(--height-progress-bar);
+  height: var(--sizing-progress-bar-height);
   position: relative;
   width: 100%;
 }
@@ -36,21 +38,21 @@ progress,
 progress::-webkit-progress-bar {
   background-color: transparent;
   border: 0;
-  height: var(--height-progress-bar);
+  height: var(--sizing-progress-bar-height);
   width: 100%;
 }
 
 progress::-webkit-progress-value {
-  --background-color: var(--pine-color-primary-300);
-  --border-radius: var(--pine-border-radius-xs);
-  background-color: var(--progress-fill-color, var(--background-color));
+  --border-radius: var(--pine-border-radius-050);
+  --color-background: var(--pine-color-blue-300);
+  background-color: var(--color-progress-fill, var(--color-background));
   border-radius: var(--border-radius);
 }
 
 progress::-moz-progress-bar {
-  --background-color: var(--pine-color-primary-300);
-  --border-radius: var(--pine-border-radius-xs);
-  background-color: var(--progress-fill-color, var(--background-color));
+  --color-background: var(--pine-color-blue-300);
+  --border-radius: var(--pine-border-radius-050);
+  background-color: var(--color-progress-fill, var(--color-background));
   border-radius: var(--border-radius);
 }
 
@@ -66,12 +68,12 @@ progress::-moz-progress-bar {
 }
 
 .pds-progress__percentage {
-  --font-size: var(--pine-font-size-body-sm);
-  --line-height: var(--pine-line-height-sm);
+  --font-size: var(--pine-font-size-087);
   --font-weight: var(--pine-font-weight-medium);
-  --margin-inline-start: var(--pine-spacing-md);
+  --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(--margin-inline-start) / 2);
+  margin-inline-start: calc(var(--spacing-inline-start-margin) / 2);
 }

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

@@ -9,7 +9,7 @@ export class PdsProgress {
         this.showPercent = false;
     }
     render() {
-        return (h(Host, { key: '68d38c1c9c0b21d20df22d9c9e21102f78143df7', class: this.animated ? { 'is-animated': this.animated } : '' }, h("div", { key: '2342ec7043319f3c9d6ee40b3d516523c40f8881', class: "pds-progress" }, h("label", { key: '56740d2f23e1cf0039751eac229b6c81234c45a8', class: "pds-progress__label", htmlFor: this.componentId }, this.label), h("progress", { key: 'b11e4117dae38cc8828623fbd1e25d666a5ec63c', id: this.componentId, max: "100", style: this.fillColor ? { '--progress-fill-color': this.fillColor } : {}, value: this.percent })), this.showPercent && h("div", { class: "pds-progress__percentage" }, this.percent, "%")));
+        return (h(Host, { key: '5ee3e8b3a4182384a2f70632f1b6420acd27e278', class: this.animated ? { 'is-animated': this.animated } : '' }, h("div", { key: 'd81206158817db4f806e3c804177614791f4d121', class: "pds-progress" }, h("label", { key: 'a308666ace23b903e256a71d6f3b65d53fbc6ed6', class: "pds-progress__label", htmlFor: this.componentId }, this.label), h("progress", { key: 'ded042f6761fe83c12e26f9bcbf191ff2ee66689', id: this.componentId, max: "100", style: this.fillColor ? { '--color-progress-fill': this.fillColor } : {}, value: this.percent })), this.showPercent && h("div", { key: 'bab83ee8ac34b7caea9ab7b906a1a16b72ee29fc', class: "pds-progress__percentage" }, this.percent, "%")));
     }
     static get is() { return "pds-progress"; }
     static get encapsulation() { return "shadow"; }
@@ -76,7 +76,7 @@ export class PdsProgress {
                 "docs": {
                     "tags": [{
                             "name": "defaultValue",
-                            "text": "'var(--pds-color-primary)'"
+                            "text": "'var(--pine-color-blue-300)'"
                         }],
                     "text": "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)."
                 },

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,WAAK,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(--pds-color-primary)'\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 ? { '--progress-fill-color': 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  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"]}