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

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

@@ -1,47 +1,338 @@
 import { h, Host } from "@stencil/core";
-import { assignDescription, messageId } from "../../utils/form";
-import { PdsLabel } from "../_internal/pds-label/pds-label";
+import { assignDescription, isSpecTest, messageId } from "../../utils/form";
+import { inheritAriaAttributes } from "../../utils/attributes";
+import { cancelDebouncedEvent, debounceEvent, flushDebouncedEvent } from "../../utils/utils";
+import { danger } from "@pine-ds/icons/icons";
+/**
+ * @slot append - Content to be displayed after the input field
+ * @slot prefix - Content that is displayed visually within the input field before the input field
+ * @slot prepend - Content to be displayed before the input field
+ * @slot suffix - Content that is displayed visually within the input field after the input field
+ * @slot action - Content to be displayed in the label area, typically for help icons or links
+ * @part action - Exposes the wrapper around the `action` slot for styling. Appears only when the `action` slot has content.
+ * @part append - Exposes the wrapper around the `append` slot for styling. Appears only when the `append` slot has content.
+ * @part prefix - Exposes the wrapper around the `prefix` slot for styling. Appears only when the `prefix` slot has content.
+ * @part prepend - Exposes the wrapper around the `prepend` slot for styling. Appears only when the `prepend` slot has content.
+ * @part suffix - Exposes the wrapper around the `suffix` slot for styling. Appears only when the `suffix` slot has content.
+ */
 export class PdsInput {
     constructor() {
+        this.inheritedAttributes = {};
+        this.isComposing = false;
+        this.hasLoaded = false;
+        /**
+         * If true, the input has prefix content (non-focusable)
+         */
+        this.hasPrefix = false;
+        /**
+         * If true, the input has suffix content (non-focusable)
+         */
+        this.hasSuffix = false;
+        /**
+         * If true, the input has prepend content (focusable)
+         */
+        this.hasPrepend = false;
+        /**
+         * If true, the input has append content (focusable)
+         */
+        this.hasAppend = false;
+        /**
+         * If true, the input has action content in the label area
+         */
+        this.hasAction = false;
+        /**
+         * Determines the type of control that will be displayed
+         * `'email'`, `'number'`, `'password'`, `'search'`, `'tel'`, `'text'`, `'url'`
+         * @defaultValue "text"
+         */
+        this.type = 'text';
+        /**
+         * The value of the input.
+         */
+        this.value = '';
+        /**
+         * Determines if the input has focus.
+         */
+        this.hasFocus = false;
         this.onInputEvent = (ev) => {
             const input = ev.target;
             if (input) {
                 this.value = input.value || '';
             }
-            this.pdsInput.emit(ev);
+            this.emitInputChange(ev);
         };
-        this.componentId = undefined;
-        this.disabled = undefined;
-        this.errorMessage = undefined;
-        this.helperMessage = undefined;
-        this.invalid = undefined;
-        this.label = undefined;
-        this.name = undefined;
-        this.placeholder = undefined;
-        this.readonly = undefined;
-        this.required = undefined;
-        this.type = 'text';
-        this.value = undefined;
+        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.onKeyDownEvent = (ev) => {
+            this.pdsKeyDown.emit(ev);
+        };
+    }
+    /**
+     * 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();
+        }
+    }
+    observeAddonResize() {
+        var _a;
+        if (typeof ResizeObserver === 'undefined')
+            return;
+        // Disconnect existing observer before creating a new one
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.resizeObserver = new ResizeObserver(() => {
+            this.updateAddonWidths();
+        });
+        if (this.prefixEl) {
+            this.resizeObserver.observe(this.prefixEl);
+        }
+        if (this.suffixEl) {
+            this.resizeObserver.observe(this.suffixEl);
+        }
+    }
+    updateAddonWidths() {
+        requestAnimationFrame(() => {
+            if (this.prefixEl) {
+                const prefixWidth = this.prefixEl.offsetWidth;
+                this.el.style.setProperty('--prefix-width', `${prefixWidth}px`);
+            }
+            if (this.suffixEl) {
+                const suffixWidth = this.suffixEl.offsetWidth;
+                this.el.style.setProperty('--suffix-width', `${suffixWidth}px`);
+            }
+        });
+    }
+    renderPrefix() {
+        const hasPrefix = this.el.querySelector('[slot="prefix"]') !== null;
+        if (hasPrefix) {
+            return (h("div", { class: "pds-input__prefix", part: "prefix", ref: (el) => this.prefixEl = el }, h("slot", { name: "prefix", onSlotchange: () => this.updateAddonWidths() })));
+        }
+        return null;
+    }
+    renderSuffix() {
+        const hasSuffix = this.el.querySelector('[slot="suffix"]') !== null;
+        if (hasSuffix) {
+            return (h("div", { class: "pds-input__suffix", part: "suffix", ref: (el) => this.suffixEl = el }, h("slot", { name: "suffix", onSlotchange: () => this.updateAddonWidths() })));
+        }
+        return null;
+    }
+    renderPrepend() {
+        const hasPrepend = this.el.querySelector('[slot="prepend"]') !== null;
+        if (hasPrepend) {
+            return (h("div", { class: "pds-input__prepend", part: "prepend" }, h("slot", { name: "prepend" })));
+        }
+        return null;
+    }
+    renderAppend() {
+        const hasAppend = this.el.querySelector('[slot="append"]') !== null;
+        if (hasAppend) {
+            return (h("div", { class: "pds-input__append", part: "append" }, h("slot", { name: "append" })));
+        }
+        return null;
+    }
+    renderAction() {
+        const hasAction = this.el.querySelector('[slot="action"]') !== null;
+        if (hasAction) {
+            return (h("div", { class: "pds-input__action", part: "action" }, h("slot", { name: "action" })));
+        }
+        return null;
+    }
+    componentWillLoad() {
+        this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
+        this.hasPrefix = this.el.querySelector('[slot="prefix"]') !== null;
+        this.hasSuffix = this.el.querySelector('[slot="suffix"]') !== null;
+        this.hasPrepend = this.el.querySelector('[slot="prepend"]') !== null;
+        this.hasAppend = this.el.querySelector('[slot="append"]') !== null;
+        this.hasAction = this.el.querySelector('[slot="action"]') !== null;
+        // Store the original pdsInput event emitter
+        this.originalPdsInput = this.pdsInput;
+    }
+    connectedCallback() {
+        // Initialize ElementInternals for form association (only once per element instance)
+        if (this.el.attachInternals && !this.internals) {
+            this.internals = this.el.attachInternals();
+        }
+        // Re-establish ResizeObserver after DOM reconnection
+        // Only run if component has already loaded (refs are available)
+        if (this.hasLoaded && !this.resizeObserver) {
+            this.updateAddonWidths();
+            this.observeAddonResize();
+        }
+    }
+    disconnectedCallback() {
+        var _a;
+        cancelDebouncedEvent(this.pdsInput);
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.resizeObserver = undefined;
+    }
+    componentDidLoad() {
+        this.hasLoaded = true;
+        this.debounceChanged();
+        this.updateAddonWidths();
+        this.observeAddonResize();
+        // Set initial form value
+        this.updateFormValue();
+    }
+    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);
+        // After the swap, so an emit made while flushing goes to the new emitter, not the old one.
+        flushDebouncedEvent(pdsInput);
+    }
+    valueChanged() {
+        const nativeInput = this.nativeInput;
+        const value = this.getValue();
+        if (nativeInput && nativeInput.value !== value && !this.isComposing) {
+            nativeInput.value = value;
+        }
+        // Update form value when value changes
+        this.updateFormValue();
+    }
+    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 });
+    }
+    /**
+     * Updates the form value using ElementInternals API
+     */
+    updateFormValue() {
+        if (isSpecTest())
+            return;
+        if (this.internals && this.internals.setFormValue) {
+            const value = this.getValue();
+            this.internals.setFormValue(value || null);
+            // Set validity based on native input validation
+            if (this.nativeInput && this.internals && this.internals.setValidity) {
+                this.internals.setValidity(this.nativeInput.validity, this.nativeInput.validationMessage, this.nativeInput);
+            }
+        }
+    }
+    /**
+     * Form Associated Custom Elements API: Called when the form is reset
+     */
+    formResetCallback() {
+        this.value = '';
+        this.updateFormValue();
+    }
+    /**
+     * Form Associated Custom Elements API: Called when the form is disabled
+     */
+    formDisabledCallback(disabled) {
+        this.disabled = disabled;
+    }
+    /**
+     * Form Associated Custom Elements API: Called to restore form state
+     */
+    formStateRestoreCallback(state) {
+        if (typeof state === 'string') {
+            this.value = state;
+        }
+        else if (state instanceof FormData && this.name) {
+            // Extract value from FormData using the input's name
+            const value = state.get(this.name);
+            if (typeof value === 'string') {
+                this.value = value;
+            }
+        }
     }
     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))));
+        const { componentId, disabled, errorMessage, helperMessage, invalid = false, label, } = this;
+        const value = this.getValue();
+        const inputWrapperClasses = {
+            'pds-input__field-wrapper': true,
+            'has-focus': this.hasFocus,
+            'has-error': invalid || !!errorMessage,
+            'is-disabled': disabled,
+            'has-prefix': this.hasPrefix,
+            'has-suffix': this.hasSuffix,
+            'has-prepend': this.hasPrepend,
+            'has-append': this.hasAppend,
+        };
+        return (h(Host, { key: '12dd9f60e5b7401fdad3d81aacf174d1465dfdd6', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-prefix": this.hasPrefix ? 'true' : null, "has-suffix": this.hasSuffix ? 'true' : null, "has-prepend": this.hasPrepend ? 'true' : null, "has-append": this.hasAppend ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null, "full-width": this.fullWidth ? 'true' : null }, h("div", { key: '5c8c1488cd9041333cf22e5ef36c367d8bddcc21', class: "pds-input" }, label && (h("div", { key: '2fd1d0a71714e11ff7675f3ab376c859b717122e', class: {
+                'pds-input__label-wrapper': true,
+                'visually-hidden': this.hideLabel,
+            } }, h("label", { key: '82623092a61b5158daa39937a8c8e01081cb6fa3', htmlFor: componentId, class: "pds-input__label" }, h("span", { key: '10a973c6191458f1133c34ccfdfd5342d330829d' }, label, this.required && h("span", { key: '413deb83a0c8b7f0ab0e5648a7bde19166477a1c', class: "pds-input__required-indicator" }, " *"))), !this.hideLabel && this.renderAction())), h("div", { key: 'c90ff99e08ab480453015fa293d38077204ea07c', class: inputWrapperClasses }, this.renderPrepend(), this.renderPrefix(), h("input", Object.assign({ key: 'd558ffc9369bd19c454f88c48acde45a4a992122', ref: (input) => (this.nativeInput = input), class: "pds-input__field", "aria-describedby": assignDescription(componentId, invalid, helperMessage, errorMessage), "aria-invalid": invalid ? "true" : undefined, autocomplete: this.autocomplete, disabled: disabled, id: componentId, max: this.max, maxlength: this.maxlength, min: this.min, minlength: this.minlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, step: this.step, type: this.type, value: value, onInput: this.onInputEvent, onChange: this.onChangeEvent, onBlur: this.onBlurEvent, onFocus: this.onFocusEvent, onKeyDown: this.onKeyDownEvent, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd }, this.inheritedAttributes)), this.renderSuffix(), this.renderAppend()), helperMessage && (h("p", { key: '747fd78b735924efb0a0e074ef20eac011c8887b', class: "pds-input__helper-message", id: messageId(componentId, 'helper') }, helperMessage)), errorMessage && (h("p", { key: '1a1ce87923e24bd70fc85f410c1eb3e69f16171f', class: "pds-input__error-message", id: messageId(componentId, 'error') }, h("pds-icon", { key: 'be6bb7c6e24b379afd7cd6977b5555f680b41f6b', "aria-hidden": "true", icon: danger, size: "small" }), errorMessage)))));
     }
     static get is() { return "pds-input"; }
     static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
     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."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "autocomplete"
+            },
             "componentId": {
                 "type": "string",
                 "mutable": false,
@@ -56,8 +347,29 @@ export class PdsInput {
                     "tags": [],
                     "text": "A unique identifier used for the underlying component `id` attribute."
                 },
-                "attribute": "component-id",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "component-id"
+            },
+            "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 after each input event before emitting `pdsInput`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "debounce"
             },
             "disabled": {
                 "type": "boolean",
@@ -71,10 +383,12 @@ 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
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled"
             },
             "errorMessage": {
                 "type": "string",
@@ -88,10 +402,12 @@ export class PdsInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Specifies the error message and provides an error-themed treatment to the field."
+                    "text": "Displays an error message below the input and gives the field error styling. It becomes the input's accessible description only while `invalid` is set."
                 },
-                "attribute": "error-message",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error-message"
             },
             "helperMessage": {
                 "type": "string",
@@ -107,8 +423,10 @@ export class PdsInput {
                     "tags": [],
                     "text": "Displays a message or hint below the input field."
                 },
-                "attribute": "helper-message",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "helper-message"
             },
             "invalid": {
                 "type": "boolean",
@@ -122,10 +440,12 @@ 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 is invalid."
                 },
-                "attribute": "invalid",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "invalid"
             },
             "label": {
                 "type": "string",
@@ -141,8 +461,105 @@ export class PdsInput {
                     "tags": [],
                     "text": "Text to be displayed as the input label."
                 },
-                "attribute": "label",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "hideLabel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visually hides the label text for instances where only the input should be displayed. Label remains accessible to assistive technology such as screen readers.\nNote: When true, the action slot is also hidden to maintain a minimal UI."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-label"
+            },
+            "max": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies the maximum value for the input field."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max"
+            },
+            "maxlength": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies the maximum number of characters allowed in the input field."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "maxlength"
+            },
+            "min": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies the minimum value for the input field."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min"
+            },
+            "minlength": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies the minimum number of characters allowed in the input field."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "minlength"
             },
             "name": {
                 "type": "string",
@@ -158,8 +575,29 @@ export class PdsInput {
                     "tags": [],
                     "text": "Specifies the name. Submitted with the form name/value pair."
                 },
-                "attribute": "name",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "pattern": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies the regular expression that the input value is checked against."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pattern"
             },
             "placeholder": {
                 "type": "string",
@@ -175,8 +613,10 @@ export class PdsInput {
                     "tags": [],
                     "text": "Specifies a short hint that describes the expected value of the input field."
                 },
-                "attribute": "placeholder",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder"
             },
             "readonly": {
                 "type": "boolean",
@@ -190,10 +630,12 @@ 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
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "readonly"
             },
             "required": {
                 "type": "boolean",
@@ -207,10 +649,31 @@ 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."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required"
+            },
+            "step": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Works with the `min` and `max` attributes to define increments for the input field."
                 },
-                "attribute": "required",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "step"
             },
             "type": {
                 "type": "string",
@@ -227,18 +690,20 @@ 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'`, `'search'`, `'tel'`, `'text'`, `'url'`"
                 },
-                "attribute": "type",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "type",
                 "defaultValue": "'text'"
             },
             "value": {
-                "type": "string",
+                "type": "any",
                 "mutable": true,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "string | number | null",
+                    "resolved": "number | string",
                     "references": {}
                 },
                 "required": false,
@@ -247,13 +712,126 @@ export class PdsInput {
                     "tags": [],
                     "text": "The value of the input."
                 },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
                 "attribute": "value",
-                "reflect": false
+                "defaultValue": "''"
+            },
+            "fullWidth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines whether or not the input field takes full width of its container."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "full-width"
+            },
+            "highlight": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Applies highlight styling to the input field."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "highlight"
             }
         };
     }
+    static get states() {
+        return {
+            "hasPrefix": {},
+            "hasSuffix": {},
+            "hasPrepend": {},
+            "hasAppend": {},
+            "hasAction": {},
+            "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": "Emitted when the user changes the value and then presses `Enter` or leaves the field.\n`detail` has `value`, as a string, and `event`, the native event behind it, usually `change`.\n\nThis event will not emit when programmatically setting the `value` property, unless the field has focus at the time;\nthen it emits when the field loses focus."
+                },
+                "complexType": {
+                    "original": "InputChangeEventDetail",
+                    "resolved": "InputChangeEventDetail",
+                    "references": {
+                        "InputChangeEventDetail": {
+                            "location": "import",
+                            "path": "./input-interface",
+                            "id": "src/components/pds-input/input-interface.ts::InputChangeEventDetail",
+                            "referenceLocation": "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 +839,71 @@ export class PdsInput {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when a keyboard input occurred."
+                    "text": "Emitted after each `input` event, such as typing or pasting. With `debounce`, it waits until that many milliseconds have passed since the last one.\n`detail` has `value`, the current value as a string, and `event`, the native `input` event.\n\nThis event will not emit when programmatically setting the `value` property."
                 },
                 "complexType": {
-                    "original": "InputEvent",
-                    "resolved": "InputEvent",
+                    "original": "InputInputEventDetail",
+                    "resolved": "InputInputEventDetail",
                     "references": {
-                        "InputEvent": {
+                        "InputInputEventDetail": {
+                            "location": "import",
+                            "path": "./input-interface",
+                            "id": "src/components/pds-input/input-interface.ts::InputInputEventDetail",
+                            "referenceLocation": "InputInputEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "pdsKeyDown",
+                "name": "pdsKeyDown",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a key is pressed down in the input."
+                },
+                "complexType": {
+                    "original": "KeyboardEvent",
+                    "resolved": "KeyboardEvent",
+                    "references": {
+                        "KeyboardEvent": {
                             "location": "global",
-                            "id": "global::InputEvent"
+                            "id": "global::KeyboardEvent"
                         }
                     }
                 }
             }];
     }
+    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