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

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

@@ -1,16 +1,47 @@
 import { h, Host } from "@stencil/core";
 import { assignDescription, messageId } from "../../utils/form";
-import { PdsLabel } from "../_internal/pds-label/pds-label";
+import { danger } from "@pine-ds/icons/icons";
+import { debounceEvent } from "../../utils/utils";
+import { inheritAriaAttributes } from "../../utils/attributes";
 export class PdsInput {
     constructor() {
+        this.inheritedAttributes = {};
+        this.isComposing = false;
         this.onInputEvent = (ev) => {
             const input = ev.target;
             if (input) {
                 this.value = input.value || '';
             }
-            this.pdsInput.emit(ev);
+            this.emitInputChange(ev);
         };
+        this.onChangeEvent = (ev) => {
+            this.emitValueChange(ev);
+        };
+        this.onBlurEvent = (ev) => {
+            this.hasFocus = false;
+            if (this.focusedValue !== this.value) {
+                /**
+                 * Emits the `pdsChange` event when the input value
+                 * is different than the value when the input was focused.
+                 */
+                this.emitValueChange(ev);
+            }
+            this.pdsBlur.emit(ev);
+        };
+        this.onFocusEvent = (ev) => {
+            this.hasFocus = true;
+            this.focusedValue = this.value;
+            this.pdsFocus.emit(ev);
+        };
+        this.onCompositionStart = () => {
+            this.isComposing = true;
+        };
+        this.onCompositionEnd = () => {
+            this.isComposing = false;
+        };
+        this.autocomplete = undefined;
         this.componentId = undefined;
+        this.debounce = undefined;
         this.disabled = undefined;
         this.errorMessage = undefined;
         this.helperMessage = undefined;
@@ -21,27 +52,105 @@ export class PdsInput {
         this.readonly = undefined;
         this.required = undefined;
         this.type = 'text';
-        this.value = undefined;
+        this.value = '';
+        this.hasFocus = false;
+    }
+    /**
+     * Sets focus on the native `input` in the `pds-input`. Use this method instead of the global
+     * `input.focus()`.
+     */
+    async setFocus() {
+        if (this.nativeInput) {
+            this.nativeInput.focus();
+        }
+    }
+    debounceChanged() {
+        const { pdsInput, debounce, originalPdsInput } = this;
+        /**
+         * If debounce is undefined, we have to manually revert the pdsInput emitter in case
+         * debounce used to be set to a number. Otherwise, the event would stay debounced.
+         */
+        this.pdsInput = debounce === undefined ? originalPdsInput !== null && originalPdsInput !== void 0 ? originalPdsInput : pdsInput : debounceEvent(pdsInput, debounce);
+    }
+    valueChanged() {
+        const nativeInput = this.nativeInput;
+        const value = this.getValue();
+        if (nativeInput && nativeInput.value !== value && !this.isComposing) {
+            nativeInput.value = value;
+        }
+    }
+    getValue() {
+        return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();
+    }
+    /**
+     * Emits a pdsChange event
+     */
+    emitValueChange(event) {
+        const { value } = this;
+        const newValue = value == null ? value : value.toString();
+        this.focusedValue = newValue;
+        this.pdsChange.emit({ value: newValue, event });
+    }
+    /**
+     *
+     * Emits a `pdsInput` event
+     */
+    emitInputChange(event) {
+        const { value } = this;
+        // Checks for both null and undefined values
+        const newValue = value == null ? value : value.toString();
+        this.pdsInput.emit({ value: newValue, event });
+    }
+    componentWillLoad() {
+        this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
+    }
+    componentDidLoad() {
+        this.debounceChanged();
+    }
+    inputClassNames() {
+        const classNames = ['pds-input__field'];
+        if (this.invalid && this.invalid === true) {
+            classNames.push('is-invalid');
+        }
+        return classNames.join('  ');
     }
     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: '6e4e04c4db43e707c0681e878c1b1f73deee86ae', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null }, h("div", { key: '6610ccb16fb657e6d97aca89b21ff2e2bc0e3fe1', class: "pds-input" }, this.label &&
+            h("label", { key: 'd85cdc84dcd35abcd592e6374e1e3d080f97ab8c', class: "pds-input__label", htmlFor: this.componentId }, this.label), h("input", Object.assign({ key: 'de33a9a5ca6901c9c745fcef9475557cfec1cf91', class: this.inputClassNames(), ref: (input) => this.nativeInput = input, "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, autocomplete: this.autocomplete, disabled: this.disabled, id: this.componentId, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, type: this.type, value: this.value, onInput: this.onInputEvent, onChange: this.onChangeEvent, onBlur: this.onBlurEvent, onFocus: this.onFocusEvent, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd }, this.inheritedAttributes)), this.helperMessage &&
+            h("p", { key: '0721204043319effd9ce7ee3fd42a81570ffbdcc', class: "pds-input__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            h("p", { key: '68e71598657e55cb3ca4ad25a23b673bafe1eefb', class: "pds-input__error-message", id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '9d3969d79ecd3ab4bd2a83ff775409b00f8eb3c9', icon: danger, size: "small" }), this.errorMessage))));
     }
     static get is() { return "pds-input"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["pds-input.scss"]
+            "$": ["pds-input.tokens.scss", "../../global/styles/utils/label.scss", "pds-input.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["pds-input.css"]
+            "$": ["pds-input.tokens.css", "../../global/styles/utils/label.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,
@@ -59,6 +168,23 @@ export class PdsInput {
                 "attribute": "component-id",
                 "reflect": false
             },
+            "debounce": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the number of milliseconds to wait before updating the value."
+                },
+                "attribute": "debounce",
+                "reflect": false
+            },
             "disabled": {
                 "type": "boolean",
                 "mutable": false,
@@ -71,7 +197,7 @@ export class PdsInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Indicates whether or not the input field is disabled."
+                    "text": "Determines whether or not the input field is disabled."
                 },
                 "attribute": "disabled",
                 "reflect": false
@@ -122,7 +248,7 @@ export class PdsInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Indicates whether or not the input field is invalid or throws an error."
+                    "text": "Determines whether or not the input field is invalid or throws an error."
                 },
                 "attribute": "invalid",
                 "reflect": false
@@ -190,7 +316,7 @@ export class PdsInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Indicates whether or not the input field is readonly."
+                    "text": "Determines whether or not the input field is readonly."
                 },
                 "attribute": "readonly",
                 "reflect": false
@@ -207,7 +333,7 @@ export class PdsInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Indicates whether or not the input field is required."
+                    "text": "Determines whether or not the input field is required."
                 },
                 "attribute": "required",
                 "reflect": false
@@ -227,18 +353,18 @@ export class PdsInput {
                             "name": "defaultValue",
                             "text": "\"text\""
                         }],
-                    "text": "Determines the type of control that will be displayed\n`'email'`, `'number'`, `'password'`, `'tel'`, `'text'`"
+                    "text": "Determines the type of control that will be displayed\n`'email'`, `'number'`, `'password'`, `'tel'`, `'text'`, `'url'`"
                 },
                 "attribute": "type",
                 "reflect": false,
                 "defaultValue": "'text'"
             },
             "value": {
-                "type": "string",
+                "type": "any",
                 "mutable": true,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "string | number | null",
+                    "resolved": "number | string",
                     "references": {}
                 },
                 "required": false,
@@ -248,12 +374,79 @@ export class PdsInput {
                     "text": "The value of the input."
                 },
                 "attribute": "value",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "''"
             }
         };
     }
+    static get states() {
+        return {
+            "hasFocus": {}
+        };
+    }
     static get events() {
         return [{
+                "method": "pdsBlur",
+                "name": "pdsBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the input loses focus."
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "pdsChange",
+                "name": "pdsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\nEmitted when the value has changed.\n\nThis event will not emit when programmatically setting the `value` property."
+                },
+                "complexType": {
+                    "original": "InputChangeEventDetail",
+                    "resolved": "InputChangeEventDetail",
+                    "references": {
+                        "InputChangeEventDetail": {
+                            "location": "import",
+                            "path": "./input-interface",
+                            "id": "src/components/pds-input/input-interface.ts::InputChangeEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "pdsFocus",
+                "name": "pdsFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the input has focus."
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }, {
                 "method": "pdsInput",
                 "name": "pdsInput",
                 "bubbles": true,
@@ -261,19 +454,51 @@ export class PdsInput {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when a keyboard input occurred."
+                    "text": "Emitted when a keyboard input occurs."
                 },
                 "complexType": {
-                    "original": "InputEvent",
-                    "resolved": "InputEvent",
+                    "original": "InputInputEventDetail",
+                    "resolved": "InputInputEventDetail",
                     "references": {
-                        "InputEvent": {
-                            "location": "global",
-                            "id": "global::InputEvent"
+                        "InputInputEventDetail": {
+                            "location": "import",
+                            "path": "./input-interface",
+                            "id": "src/components/pds-input/input-interface.ts::InputInputEventDetail"
                         }
                     }
                 }
             }];
     }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets focus on the native `input` in the `pds-input`. Use this method instead of the global\n`input.focus()`.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "debounce",
+                "methodName": "debounceChanged"
+            }, {
+                "propName": "value",
+                "methodName": "valueChanged"
+            }];
+    }
 }
 //# sourceMappingURL=pds-input.js.map

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":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { danger } from '@pine-ds/icons/icons';\n\nimport { debounceEvent } from '@utils/utils';\nimport { inheritAriaAttributes } from '@utils/attributes';\n\nimport type { Attributes } from '@utils/attributes';\nimport type { InputChangeEventDetail, InputInputEventDetail } from './input-interface';\n\n@Component({\n  tag: 'pds-input',\n  styleUrls: ['pds-input.tokens.scss', '../../global/styles/utils/label.scss', 'pds-input.scss'],\n  shadow: true,\n})\nexport class PdsInput {\n  private nativeInput?: HTMLInputElement;\n  private inheritedAttributes: Attributes = {};\n  private isComposing = false;\n  /**\n   * The value of the input when the input is focused.\n   */\n  private focusedValue?: string | number | null;\n\n  private originalPdsInput?: EventEmitter<InputInputEventDetail>;\n\n  @Element() el!: HTMLPdsInputElement;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() pdsBlur!: EventEmitter<FocusEvent>;\n\n  /**\n   *\n   * Emitted when the value has changed.\n   *\n   * This event will not emit when programmatically setting the `value` property.\n   */\n  @Event() pdsChange!: EventEmitter<InputChangeEventDetail>;\n\n  /**\n   * Emitted when the input has focus.\n   */\n  @Event() pdsFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when a keyboard input occurs.\n   */\n  @Event() pdsInput: EventEmitter<InputInputEventDetail>;\n\n  /**\n   * Sets focus on the native `input` in the `pds-input`. Use this method instead of the global\n   * `input.focus()`.\n   */\n  @Method()\n  async setFocus() {\n    if ( this.nativeInput ) {\n      this.nativeInput.focus();\n    }\n  }\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   * Sets the number of milliseconds to wait before updating the value.\n   */\n  @Prop() debounce?: number;\n\n  /**\n   * Determines 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   * Determines 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   * Determines whether or not the input field is readonly.\n   */\n  @Prop() readonly?: boolean;\n\n  /**\n   * Determines 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'`, `'url'`\n   * @defaultValue \"text\"\n   */\n  @Prop() type = 'text';\n\n  /**\n   * The value of the input.\n   */\n  @Prop({mutable: true}) value?: string | number | null = '';\n\n  /**\n   * Determines if the input has focus.\n   */\n  @State() hasFocus = false;\n\n\n  @Watch('debounce')\n  protected debounceChanged() {\n    const { pdsInput, debounce, originalPdsInput } = this;\n\n    /**\n     * If debounce is undefined, we have to manually revert the pdsInput emitter in case\n     * debounce used to be set to a number. Otherwise, the event would stay debounced.\n     */\n    this.pdsInput = debounce === undefined ? originalPdsInput ?? pdsInput : debounceEvent(pdsInput, debounce);\n  }\n\n  @Watch('value')\n  protected valueChanged() {\n    const nativeInput = this.nativeInput;\n    const value = this.getValue();\n\n    if (nativeInput && nativeInput.value !== value && !this.isComposing) {\n      nativeInput.value = value;\n    }\n  }\n\n  private getValue(): string {\n    return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();\n  }\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.emitInputChange(ev);\n  };\n\n  private onChangeEvent = (ev: Event) => {\n    this.emitValueChange(ev);\n  };\n\n  private onBlurEvent = (ev: FocusEvent) => {\n    this.hasFocus = false;\n\n    if (this.focusedValue !== this.value) {\n      /**\n       * Emits the `pdsChange` event when the input value\n       * is different than the value when the input was focused.\n       */\n      this.emitValueChange(ev);\n    }\n\n    this.pdsBlur.emit(ev);\n  };\n\n  private onFocusEvent = (ev: FocusEvent) => {\n    this.hasFocus = true;\n    this.focusedValue = this.value;\n\n    this.pdsFocus.emit(ev);\n  };\n\n  private onCompositionStart = () => {\n    this.isComposing = true;\n  }\n\n  private onCompositionEnd = () => {\n    this.isComposing = false;\n  }\n\n  /**\n   * Emits a pdsChange event\n   */\n  private emitValueChange(event?: Event) {\n    const { value } = this;\n    const newValue = value == null ? value : value.toString();\n\n    this.focusedValue = newValue;\n    this.pdsChange.emit({ value: newValue, event });\n  }\n\n  /**\n   *\n   * Emits a `pdsInput` event\n   */\n  private emitInputChange(event?: Event) {\n    const { value } = this;\n\n    // Checks for both null and undefined values\n    const newValue = value == null ? value : value.toString();\n\n    this.pdsInput.emit({ value: newValue, event });\n  }\n\n\n  componentWillLoad() {\n    this.inheritedAttributes = {\n      ...inheritAriaAttributes(this.el)\n    }\n  }\n\n  componentDidLoad() {\n    this.debounceChanged();\n  }\n\n  private inputClassNames() {\n    const classNames = ['pds-input__field'];\n\n    if (this.invalid && this.invalid === true) {\n      classNames.push('is-invalid');\n    }\n\n    return classNames.join('  ');\n  }\n\n  render() {\n    return (\n      <Host\n        aria-disabled={this.disabled ? 'true' : null}\n        aria-readonly={this.readonly ? 'true' : null}\n      >\n        <div class=\"pds-input\">\n          {this.label &&\n            <label class=\"pds-input__label\" htmlFor={this.componentId}>{this.label}</label>\n          }\n          <input\n            class={this.inputClassNames()}\n            ref={(input) => this.nativeInput = input}\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            onChange={this.onChangeEvent}\n            onBlur={this.onBlurEvent}\n            onFocus={this.onFocusEvent}\n            onCompositionstart={this.onCompositionStart}\n            onCompositionend={this.onCompositionEnd}\n            {...this.inheritedAttributes}\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              <pds-icon icon={danger} size=\"small\" />\n              {this.errorMessage}\n            </p>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,6 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+:host {
+  --pine-input-color-background-danger: var(--pine-color-red-050);
+}

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

@@ -5,6 +5,8 @@ import { withActions } from '@storybook/addon-actions/decorator';
 export default {
   argTypes: extractArgTypes('pds-input'),
   args: {
+    autocomplete: null,
+    debounce: null,
     disabled: false,
     errorMessage: null,
     helperMessage: null,
@@ -18,7 +20,11 @@ export default {
   component: 'pds-input',
   parameters: {
     actions: {
-      handles: ['oninput', 'pdsInput'],
+      handles: [
+        'oninput', 'pdsInput',
+        'onchange', 'pdsChange',
+        'onblur', 'pdsBlur',
+        'onFocus', 'pdsFocus'],
     },
   },
   title: 'components/Input',
@@ -26,11 +32,13 @@ export default {
 }
 
 const BaseTemplate = (args) => html`<pds-input
+  autocomplete="${args.autocomplete}"
+  component-id="${args.componentId}"
+  debounce="${args.debounce}"
   disabled="${args.disabled}"
   error-message="${args.errorMessage}"
   helper-message="${args.helperMessage}"
   invalid="${args.invalid}"
-  component-id="${args.componentId}"
   label="${args.label}"
   name="${args.name}"
   placeholder="${args.placeholder}"
@@ -108,3 +116,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,27 +1,16 @@
 :host {
-  --border-outline: 4px solid var(--pine-color-blue-200);
-  --border-radius: var(--pine-border-radius-075);
-  --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);
-  --color-text-default: var(--pine-color-grey-900);
-  --font-size: var(--pine-font-size-100);
-  --font-size-sm: var(--pine-font-size-085);
-  --font-size-xs: var(--pine-font-size-085);
-  --font-weight: var(--pine-font-weight-medium);
-  --spacing-inline-start-margin: var(--pine-spacing-050);
-  --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-focus-ring);
   display: inline;
 }
 :host pds-icon {
-  margin-inline-start: var(--spacing-inline-start-margin);
+  margin-inline-start: var(--pine-dimension-2xs);
 }
 
 .pds-link {
   align-items: center;
-  color: var(--color-text);
+  color: var(--pine-color-text);
   display: inline-flex;
-  font-weight: inherit;
+  font-weight: var(--pine-font-weight-medium);
 }
 .pds-link:focus-visible {
   box-shadow: var(--box-shadow-focus);
@@ -30,34 +19,34 @@
 }
 
 .pds-link--sm {
-  font-size: var(--font-size-xs);
+  font-size: var(--pine-font-size-body-xs);
 }
 .pds-link--sm pds-icon {
-  height: var(--sizing-svg-sm);
-  width: var(--sizing-svg-sm);
+  height: var(--pine-dimension-xs);
+  width: var(--pine-dimension-xs);
 }
 
 .pds-link--md {
-  font-size: var(--font-size-sm);
+  font-size: var(--pine-font-size-body-sm);
 }
 .pds-link--md pds-icon {
-  height: var(--sizing-svg-md);
-  width: var(--sizing-svg-md);
+  height: var(--pine-dimension-xs);
+  width: var(--pine-dimension-xs);
 }
 
 .pds-link--lg {
-  font-size: var(--font-size);
+  font-size: var(--pine-font-size-body-md);
 }
 .pds-link--lg pds-icon {
-  height: var(--sizing-svg-lg);
-  width: var(--sizing-svg-lg);
+  height: var(--pine-dimension-sm);
+  width: var(--pine-dimension-sm);
 }
 
 .pds-link--plain {
-  font-weight: var(--font-weight);
   text-decoration: none;
 }
 .pds-link--plain:hover {
+  color: var(--pine-color-text-hover);
   text-decoration: underline;
 }
 
@@ -65,5 +54,6 @@
   text-decoration: underline;
 }
 .pds-link--default:hover {
+  color: var(--pine-color-text-hover);
   text-decoration: none;
 }

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

@@ -1,8 +1,8 @@
 import { h } from "@stencil/core";
 import { launch } from "@pine-ds/icons/icons";
 /**
- * @part link - The main link element that represents the link component.
- * @slot - Content is placed between the opening closing tags.
+ * @part link - Link element styles.
+ * @slot (default) - Text content placed between the opening and closing tags. If no text is provided, the **href** will be used as a fallback.
  */
 export class PdsLink {
     constructor() {
@@ -23,8 +23,8 @@ 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: '7ac75452091305e238c20ef1fc2055fe2f34fb04', class: this.classNames(), href: this.href, id: this.componentId, target: this.external ? '_blank' : undefined, part: "link" }, h("slot", { key: '8f21b34931f85867b91e7c6c3fcc1952b9c430cd' }, this.href), this.external &&
+            h("pds-icon", { key: '60f1d607df5bf4cac7a9786f1560702719e73ff5', icon: launch, size: this.fontSize })));
     }
     static get is() { return "pds-link"; }
     static get encapsulation() { return "shadow"; }
@@ -72,7 +72,7 @@ export class PdsLink {
                             "name": "defaultValue",
                             "text": "false"
                         }],
-                    "text": "When enabled, opens link in a new tab."
+                    "text": "Determines whether the link should open in a new tab."
                 },
                 "attribute": "external",
                 "reflect": false,
@@ -89,8 +89,11 @@ export class PdsLink {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "\nModifies the look of the link"
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "inline"
+                        }],
+                    "text": "Sets the link variant styles."
                 },
                 "attribute": "variant",
                 "reflect": false,
@@ -111,7 +114,7 @@ export class PdsLink {
                             "name": "defaultValue",
                             "text": "lg"
                         }],
-                    "text": "\nThe Font size follows t-shirt model\nsm: 12px\nmd: 14px\nlg: 16px"
+                    "text": "The font size of the link's text."
                 },
                 "attribute": "font-size",
                 "reflect": false,
@@ -129,7 +132,7 @@ export class PdsLink {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The URL that the hyperlink points to."
+                    "text": "The hyperlink's destination URL. If no text is provided in the custom slot, the href will be used."
                 },
                 "attribute": "href",
                 "reflect": false

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;wBAMP,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 - Link element styles.\n * @slot (default) - Text content placed between the opening and closing tags. If no text is provided, the **href** will be used as a fallback.\n */\n@Component({\n  tag: 'pds-link',\n  styleUrls: ['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   * Determines whether the link should open in a new tab.\n   * @defaultValue false\n   */\n  @Prop() external = false;\n\n  /**\n   * Sets the link variant styles.\n   * @defaultValue inline\n   */\n  @Prop() variant: 'inline' | 'plain' = 'inline';\n\n  /**\n   * The font size of the link's text.\n   * @defaultValue lg\n   */\n  @Prop() fontSize: 'sm' | 'md' | 'lg' = 'lg';\n\n  /**\n   * The hyperlink's destination URL. If no text is provided in the custom slot, the href will be used.\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"]}