@esri/calcite-components 1.0.0-beta.97 → 1.0.0-beta.99

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

@@ -1,100 +1,27 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.97
+ * v1.0.0-beta.99
  */
 import { h, Host } from "@stencil/core";
 import { getElementDir, getElementProp, getSlotted, isPrimaryPointerButton, setRequestedIcon } from "../../utils/dom";
-import { CSS, INPUT_TYPE_ICONS, SLOTS, TEXT } from "./resources";
+import { CSS, INPUT_TYPE_ICONS, SLOTS } from "./resources";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
 import { connectForm, disconnectForm, HiddenFormInputSlot, submitForm } from "../../utils/form";
-import { defaultNumberingSystem, numberStringFormatter, disconnectLocalized, connectLocalized, updateEffectiveLocale } from "../../utils/locale";
+import { defaultNumberingSystem, numberStringFormatter, disconnectLocalized, connectLocalized } from "../../utils/locale";
 import { numberKeys } from "../../utils/key";
 import { isValidNumber, parseNumberString, sanitizeNumberString } from "../../utils/number";
-import { CSS_UTILITY, TEXT as COMMON_TEXT } from "../../utils/resources";
+import { CSS_UTILITY } from "../../utils/resources";
 import { decimalPlaces } from "../../utils/math";
 import { createObserver } from "../../utils/observers";
 import { updateHostInteraction } from "../../utils/interactive";
+import { connectMessages, disconnectMessages, setUpMessages, updateMessages } from "../../utils/t9n";
+import { setUpLoadableComponent, setComponentLoaded, componentLoaded } from "../../utils/loadable";
 /**
  * @slot action - A slot for positioning a `calcite-button` next to the component.
  */
 export class Input {
   constructor() {
-    //--------------------------------------------------------------------------
-    //
-    //  Properties
-    //
-    //--------------------------------------------------------------------------
-    /** Specifies the text alignment of the component's value. */
-    this.alignment = "start";
-    /**
-     * When `true`, the component is focused on page load.
-     *
-     * @mdn [autofocus](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)
-     */
-    this.autofocus = false;
-    /**
-     * When `true`, a clear button is displayed when the component has a value. The clear button shows by default for `"search"`, `"time"`, and `"date"` types, and will not display for the `"textarea"` type.
-     */
-    this.clearable = false;
-    /**
-     * When `true`, interaction is prevented and the component is displayed with lower opacity.
-     *
-     * @mdn [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled)
-     */
-    this.disabled = false;
-    /**
-     * When `true`, number values are displayed with a group separator corresponding to the language and country format.
-     */
-    this.groupSeparator = false;
-    /**
-     * When `true`, the component will not be visible.
-     *
-     * @mdn [hidden](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden)
-     */
-    this.hidden = false;
-    /**
-     * Accessible name when the component is loading.
-     *
-     * @default "Loading"
-     */
-    this.intlLoading = COMMON_TEXT.loading;
-    /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
-    this.iconFlipRtl = false;
-    /** When `true`, a busy indicator is displayed. */
-    this.loading = false;
-    /**
-     * When `true`, uses locale formatting for numbers.
-     *
-     * @internal
-     */
-    this.localeFormat = false;
-    /** Specifies the placement of the buttons for `type="number"`. */
-    this.numberButtonType = "vertical";
-    /**
-     * When `true`, the component's value can be read, but cannot be modified.
-     *
-     * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
-     */
-    this.readOnly = false;
-    /** When `true`, the component must have a value in order for the form to submit. */
-    this.required = false;
-    /** Specifies the size of the component. */
-    this.scale = "m";
-    /** Specifies the status of the input field, which determines message and icons. */
-    this.status = "idle";
-    /**
-     * @internal
-     */
-    this.editingEnabled = false;
-    /**
-     * Specifies the component type.
-     *
-     * Note that the following `type`s add type-specific icons by default: `"date"`, `"email"`, `"password"`, `"search"`, `"tel"`, `"time"`.
-     */
-    this.type = "text";
-    /** The component's value. */
-    this.value = "";
     /** keep track of the rendered child type */
     this.childElType = "input";
     this.previousValueOrigin = "initial";
@@ -102,12 +29,6 @@ export class Input {
     this.userChangedValue = false;
     //--------------------------------------------------------------------------
     //
-    //  State
-    //
-    //--------------------------------------------------------------------------
-    this.effectiveLocale = "";
-    //--------------------------------------------------------------------------
-    //
     //  Private Methods
     //
     //--------------------------------------------------------------------------
@@ -143,11 +64,13 @@ export class Input {
       this.calciteInternalInputBlur.emit();
       this.emitChangeIfUserModified();
     };
-    this.inputFocusHandler = (event) => {
+    this.clickHandler = (event) => {
       const slottedActionEl = getSlotted(this.el, "action");
       if (event.target !== slottedActionEl) {
         this.setFocus();
       }
+    };
+    this.inputFocusHandler = () => {
       this.calciteInternalInputFocus.emit();
     };
     this.inputInputHandler = (nativeEvent) => {
@@ -373,11 +296,7 @@ export class Input {
       this.setPreviousValue(previousValue || this.value);
       this.previousValueOrigin = origin;
       if (nativeEvent) {
-        const calciteInputInputEvent = this.calciteInputInput.emit({
-          element: this.childEl,
-          nativeEvent,
-          value: this.value
-        });
+        const calciteInputInputEvent = this.calciteInputInput.emit();
         if (calciteInputInputEvent.defaultPrevented) {
           this.value = this.previousValue;
           this.localizedValue =
@@ -393,22 +312,60 @@ export class Input {
     this.inputKeyUpHandler = () => {
       window.clearInterval(this.nudgeNumberValueIntervalId);
     };
+    this.alignment = "start";
+    this.autofocus = false;
+    this.clearable = false;
+    this.disabled = false;
+    this.groupSeparator = false;
+    this.hidden = false;
+    this.icon = undefined;
+    this.iconFlipRtl = false;
+    this.label = undefined;
+    this.loading = false;
+    this.numberingSystem = undefined;
+    this.localeFormat = false;
+    this.max = undefined;
+    this.min = undefined;
+    this.maxLength = undefined;
+    this.minLength = undefined;
+    this.name = undefined;
+    this.numberButtonType = "vertical";
+    this.placeholder = undefined;
+    this.prefixText = undefined;
+    this.readOnly = false;
+    this.required = false;
+    this.scale = "m";
+    this.status = "idle";
+    this.step = undefined;
+    this.autocomplete = undefined;
+    this.pattern = undefined;
+    this.accept = undefined;
+    this.multiple = false;
+    this.inputMode = "text";
+    this.enterKeyHint = undefined;
+    this.suffixText = undefined;
+    this.editingEnabled = false;
+    this.type = "text";
+    this.value = "";
+    this.messages = undefined;
+    this.messageOverrides = undefined;
+    this.effectiveLocale = "";
+    this.defaultMessages = undefined;
+    this.localizedValue = undefined;
   }
   disabledWatcher() {
     this.setDisabledAction();
   }
-  localeChanged() {
-    updateEffectiveLocale(this);
-  }
   /** watcher to update number-to-string for max */
   maxWatcher() {
-    var _a;
-    this.maxString = ((_a = this.max) === null || _a === void 0 ? void 0 : _a.toString()) || null;
+    this.maxString = this.max?.toString() || null;
   }
   /** watcher to update number-to-string for min */
   minWatcher() {
-    var _a;
-    this.minString = ((_a = this.min) === null || _a === void 0 ? void 0 : _a.toString()) || null;
+    this.minString = this.min?.toString() || null;
+  }
+  onMessagesChange() {
+    /* wired up by t9n util */
   }
   valueWatcher(newValue, previousValue) {
     if (!this.userChangedValue) {
@@ -436,14 +393,17 @@ export class Input {
   get isTextarea() {
     return this.childElType === "textarea";
   }
+  effectiveLocaleChange() {
+    updateMessages(this, this.effectiveLocale);
+  }
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
-    var _a;
     connectLocalized(this);
+    connectMessages(this);
     this.scale = getElementProp(this.el, "scale", this.scale);
     this.status = getElementProp(this.el, "status", this.status);
     this.inlineEditableEl = this.el.closest("calcite-inline-editable");
@@ -461,24 +421,28 @@ export class Input {
         value: isValidNumber(this.value) ? this.value : ""
       });
     }
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true });
+    this.mutationObserver?.observe(this.el, { childList: true });
     this.setDisabledAction();
     this.el.addEventListener("calciteInternalHiddenInputChange", this.hiddenInputChangeHandler);
   }
   disconnectedCallback() {
-    var _a;
     disconnectLabel(this);
     disconnectForm(this);
     disconnectLocalized(this);
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    disconnectMessages(this);
+    this.mutationObserver?.disconnect();
     this.el.removeEventListener("calciteInternalHiddenInputChange", this.hiddenInputChangeHandler);
   }
-  componentWillLoad() {
-    var _a, _b;
+  async componentWillLoad() {
+    setUpLoadableComponent(this);
     this.childElType = this.type === "textarea" ? "textarea" : "input";
-    this.maxString = (_a = this.max) === null || _a === void 0 ? void 0 : _a.toString();
-    this.minString = (_b = this.min) === null || _b === void 0 ? void 0 : _b.toString();
+    this.maxString = this.max?.toString();
+    this.minString = this.min?.toString();
     this.requestedIcon = setRequestedIcon(INPUT_TYPE_ICONS, this.icon, this.type);
+    await setUpMessages(this);
+  }
+  componentDidLoad() {
+    setComponentLoaded(this);
   }
   componentShouldUpdate(newValue, oldValue, property) {
     if (this.type === "number" && property === "value" && newValue && !isValidNumber(newValue)) {
@@ -500,22 +464,32 @@ export class Input {
   //--------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
-    var _a, _b;
+    await componentLoaded(this);
     if (this.type === "number") {
-      (_a = this.childNumberEl) === null || _a === void 0 ? void 0 : _a.focus();
+      this.childNumberEl?.focus();
     }
     else {
-      (_b = this.childEl) === null || _b === void 0 ? void 0 : _b.focus();
+      this.childEl?.focus();
     }
   }
   /** Selects all text of the component's `value`. */
   async selectText() {
-    var _a, _b;
     if (this.type === "number") {
-      (_a = this.childNumberEl) === null || _a === void 0 ? void 0 : _a.select();
+      this.childNumberEl?.select();
     }
     else {
-      (_b = this.childEl) === null || _b === void 0 ? void 0 : _b.select();
+      this.childEl?.select();
+    }
+  }
+  // TODO: refactor so we don't need to sync the internals in color-picker
+  // https://github.com/Esri/calcite-components/issues/6100
+  /** @internal */
+  async internalSyncChildElValue() {
+    if (this.type === "number") {
+      this.childNumberEl.value = this.value;
+    }
+    else {
+      this.childEl.value = this.value;
     }
   }
   onLabelClick() {
@@ -547,11 +521,10 @@ export class Input {
     });
   }
   syncHiddenFormInput(input) {
-    var _a, _b, _c, _d;
     if (this.type === "number") {
       input.type = "number";
-      input.min = (_b = (_a = this.min) === null || _a === void 0 ? void 0 : _a.toString(10)) !== null && _b !== void 0 ? _b : "";
-      input.max = (_d = (_c = this.max) === null || _c === void 0 ? void 0 : _c.toString(10)) !== null && _d !== void 0 ? _d : "";
+      input.min = this.min?.toString(10) ?? "";
+      input.max = this.max?.toString(10) ?? "";
     }
     else if (this.type === "text") {
       input.type = "text";
@@ -587,8 +560,8 @@ export class Input {
   // --------------------------------------------------------------------------
   render() {
     const dir = getElementDir(this.el);
-    const loader = (h("div", { class: CSS.loader }, h("calcite-progress", { label: this.intlLoading, type: "indeterminate" })));
-    const inputClearButton = (h("button", { "aria-label": this.intlClear || TEXT.clear, class: CSS.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputValue, tabIndex: -1, type: "button" }, h("calcite-icon", { icon: "x", scale: "s" })));
+    const loader = (h("div", { class: CSS.loader }, h("calcite-progress", { label: this.messages.loading, type: "indeterminate" })));
+    const inputClearButton = (h("button", { "aria-label": this.messages.clear, class: CSS.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputValue, tabIndex: -1, type: "button" }, h("calcite-icon", { icon: "x", scale: "s" })));
     const iconEl = (h("calcite-icon", { class: CSS.inputIcon, flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: "s" }));
     const isHorizontalNumberButton = this.numberButtonType === "horizontal";
     const numberButtonsHorizontalUp = (h("button", { "aria-hidden": "true", class: {
@@ -602,17 +575,17 @@ export class Input {
     const numberButtonsVertical = (h("div", { class: CSS.numberButtonWrapper }, numberButtonsHorizontalUp, numberButtonsHorizontalDown));
     const prefixText = h("div", { class: CSS.prefix }, this.prefixText);
     const suffixText = h("div", { class: CSS.suffix }, this.suffixText);
-    const localeNumberInput = this.type === "number" ? (h("input", { "aria-label": getLabelText(this), autofocus: this.autofocus ? true : null, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, enterKeyHint: this.el.enterKeyHint, inputMode: this.el.inputMode, key: "localized-input", maxLength: this.maxLength, minLength: this.minLength, name: undefined, onBlur: this.inputBlurHandler, onFocus: this.inputFocusHandler, onInput: this.inputNumberInputHandler, onKeyDown: this.inputNumberKeyDownHandler, onKeyUp: this.inputKeyUpHandler, placeholder: this.placeholder || "", readOnly: this.readOnly, ref: this.setChildNumberElRef, type: "text", value: this.localizedValue })) : null;
+    const localeNumberInput = this.type === "number" ? (h("input", { accept: this.accept, "aria-label": getLabelText(this), autocomplete: this.autocomplete, autofocus: this.autofocus ? true : null, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, enterKeyHint: this.enterKeyHint, inputMode: this.inputMode, key: "localized-input", maxLength: this.maxLength, minLength: this.minLength, multiple: this.multiple, name: undefined, onBlur: this.inputBlurHandler, onFocus: this.inputFocusHandler, onInput: this.inputNumberInputHandler, onKeyDown: this.inputNumberKeyDownHandler, onKeyUp: this.inputKeyUpHandler, pattern: this.pattern, placeholder: this.placeholder || "", readOnly: this.readOnly, ref: this.setChildNumberElRef, type: "text", value: this.localizedValue })) : null;
     const childEl = this.type !== "number"
       ? [
-        h(this.childElType, { "aria-label": getLabelText(this), autofocus: this.autofocus ? true : null, class: {
+        h(this.childElType, { accept: this.accept, "aria-label": getLabelText(this), autocomplete: this.autocomplete, autofocus: this.autofocus ? true : null, class: {
             [CSS.editingEnabled]: this.editingEnabled,
             [CSS.inlineChild]: !!this.inlineEditableEl
-          }, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, enterKeyHint: this.el.enterKeyHint, inputMode: this.el.inputMode, max: this.maxString, maxLength: this.maxLength, min: this.minString, minLength: this.minLength, name: this.name, onBlur: this.inputBlurHandler, onFocus: this.inputFocusHandler, onInput: this.inputInputHandler, onKeyDown: this.inputKeyDownHandler, onKeyUp: this.inputKeyUpHandler, placeholder: this.placeholder || "", readOnly: this.readOnly, ref: this.setChildElRef, required: this.required ? true : null, step: this.step, tabIndex: this.disabled || (this.inlineEditableEl && !this.editingEnabled) ? -1 : null, type: this.type, value: this.value }),
+          }, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, enterKeyHint: this.enterKeyHint, inputMode: this.inputMode, max: this.maxString, maxLength: this.maxLength, min: this.minString, minLength: this.minLength, multiple: this.multiple, name: this.name, onBlur: this.inputBlurHandler, onFocus: this.inputFocusHandler, onInput: this.inputInputHandler, onKeyDown: this.inputKeyDownHandler, onKeyUp: this.inputKeyUpHandler, pattern: this.pattern, placeholder: this.placeholder || "", readOnly: this.readOnly, ref: this.setChildElRef, required: this.required ? true : null, step: this.step, tabIndex: this.disabled || (this.inlineEditableEl && !this.editingEnabled) ? -1 : null, type: this.type, value: this.value }),
         this.isTextarea ? (h("div", { class: CSS.resizeIconWrapper }, h("calcite-icon", { icon: "chevron-down", scale: "s" }))) : null
       ]
       : null;
-    return (h(Host, { onClick: this.inputFocusHandler, onKeyDown: this.keyDownHandler }, h("div", { class: { [CSS.inputWrapper]: true, [CSS_UTILITY.rtl]: dir === "rtl" } }, this.type === "number" && this.numberButtonType === "horizontal" && !this.readOnly
+    return (h(Host, { onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, h("div", { class: { [CSS.inputWrapper]: true, [CSS_UTILITY.rtl]: dir === "rtl" } }, this.type === "number" && this.numberButtonType === "horizontal" && !this.readOnly
       ? numberButtonsHorizontalDown
       : null, this.prefixText ? prefixText : null, h("div", { class: CSS.wrapper }, localeNumberInput, childEl, this.isClearable ? inputClearButton : null, this.requestedIcon ? iconEl : null, this.loading ? loader : null), h("div", { class: CSS.actionWrapper }, h("slot", { name: SLOTS.action })), this.type === "number" && this.numberButtonType === "vertical" && !this.readOnly
       ? numberButtonsVertical
@@ -632,6 +605,7 @@ export class Input {
       "$": ["input.css"]
     };
   }
+  static get assetsDirs() { return ["assets"]; }
   static get properties() {
     return {
       "alignment": {
@@ -773,44 +747,6 @@ export class Input {
         "attribute": "icon",
         "reflect": true
       },
-      "intlClear": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Accessible name for the component's clear button."
-        },
-        "attribute": "intl-clear",
-        "reflect": false
-      },
-      "intlLoading": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "\"Loading\""
-            }],
-          "text": "Accessible name when the component is loading."
-        },
-        "attribute": "intl-loading",
-        "reflect": false,
-        "defaultValue": "COMMON_TEXT.loading"
-      },
       "iconFlipRtl": {
         "type": "boolean",
         "mutable": false,
@@ -838,7 +774,7 @@ export class Input {
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
           "text": "Accessible name for the component."
@@ -864,29 +800,6 @@ export class Input {
         "reflect": true,
         "defaultValue": "false"
       },
-      "locale": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "deprecated",
-              "text": "set the global `lang` attribute on the element instead."
-            }, {
-              "name": "mdn",
-              "text": "[lang](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang)"
-            }],
-          "text": "BCP 47 language tag for desired language and country format"
-        },
-        "attribute": "locale",
-        "reflect": false
-      },
       "numberingSystem": {
         "type": "string",
         "mutable": false,
@@ -901,7 +814,7 @@ export class Input {
           }
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
           "text": "Specifies the Unicode numeral system used by the component for localization."
@@ -939,7 +852,7 @@ export class Input {
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [{
               "name": "mdn",
@@ -959,7 +872,7 @@ export class Input {
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [{
               "name": "mdn",
@@ -970,26 +883,6 @@ export class Input {
         "attribute": "min",
         "reflect": true
       },
-      "maxlength": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [{
-              "name": "deprecated",
-              "text": "use `maxLength` instead."
-            }],
-          "text": "Specifies the maximum length of text for the component's value."
-        },
-        "attribute": "maxlength",
-        "reflect": true
-      },
       "maxLength": {
         "type": "number",
         "mutable": false,
@@ -999,7 +892,7 @@ export class Input {
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [{
               "name": "mdn",
@@ -1019,7 +912,7 @@ export class Input {
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [{
               "name": "mdn",
@@ -1064,7 +957,7 @@ export class Input {
           }
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
           "text": "Specifies the placement of the buttons for `type=\"number\"`."
@@ -1102,7 +995,7 @@ export class Input {
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
           "text": "Adds text to the start of the component."
@@ -1204,7 +1097,7 @@ export class Input {
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [{
               "name": "mdn",
@@ -1215,6 +1108,128 @@ export class Input {
         "attribute": "step",
         "reflect": true
       },
+      "autocomplete": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "mdn",
+              "text": "[step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)"
+            }],
+          "text": "Specifies the type of content to autocomplete, for use in forms.\nRead the native attribute's documentation on MDN for more info."
+        },
+        "attribute": "autocomplete",
+        "reflect": false
+      },
+      "pattern": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "mdn",
+              "text": "[step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern)"
+            }],
+          "text": "Specifies a regex pattern the component's `value` must match for validation.\nRead the native attribute's documentation on MDN for more info."
+        },
+        "attribute": "pattern",
+        "reflect": false
+      },
+      "accept": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "mdn",
+              "text": "[step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern)"
+            }],
+          "text": "Specifies a comma separated list of unique file type specifiers for limiting accepted file types.\nThis property only has an effect when `type` is \"file\".\nRead the native attribute's documentation on MDN for more info."
+        },
+        "attribute": "accept",
+        "reflect": false
+      },
+      "multiple": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "mdn",
+              "text": "[step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/multiple)"
+            }],
+          "text": "When `true`, the component can accept more than one value.\nThis property only has an effect when `type` is \"email\" or \"file\".\nRead the native attribute's documentation on MDN for more info."
+        },
+        "attribute": "multiple",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "inputMode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "mdn",
+              "text": "[step](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode)"
+            }],
+          "text": "Specifies the type of content to help devices display an appropriate virtual keyboard.\nRead the native attribute's documentation on MDN for more info."
+        },
+        "attribute": "input-mode",
+        "reflect": false,
+        "defaultValue": "\"text\""
+      },
+      "enterKeyHint": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "mdn",
+              "text": "[step](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint)"
+            }],
+          "text": "Specifies the action label or icon for the Enter key on virtual keyboards.\nRead the native attribute's documentation on MDN for more info."
+        },
+        "attribute": "enter-key-hint",
+        "reflect": false
+      },
       "suffixText": {
         "type": "string",
         "mutable": false,
@@ -1224,7 +1239,7 @@ export class Input {
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
           "text": "Adds text to the end of the component."
@@ -1288,12 +1303,59 @@ export class Input {
         "attribute": "value",
         "reflect": false,
         "defaultValue": "\"\""
+      },
+      "messages": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "InputMessages",
+          "resolved": "{ clear: string; loading: string; }",
+          "references": {
+            "InputMessages": {
+              "location": "import",
+              "path": "./assets/input/t9n"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": "Made into a prop for testing purposes only"
+        }
+      },
+      "messageOverrides": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "Partial<InputMessages>",
+          "resolved": "{ clear?: string; loading?: string; }",
+          "references": {
+            "Partial": {
+              "location": "global"
+            },
+            "InputMessages": {
+              "location": "import",
+              "path": "./assets/input/t9n"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Use this property to override individual strings used by the component."
+        }
       }
     };
   }
   static get states() {
     return {
       "effectiveLocale": {},
+      "defaultMessages": {},
       "localizedValue": {}
     };
   }
@@ -1342,17 +1404,12 @@ export class Input {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Fires each time a new `value` is typed.\n\n**Note:**: The `el` and `value` event payload properties are deprecated, use the event's `target`/`currentTarget` instead."
+          "text": "Fires each time a new `value` is typed."
         },
         "complexType": {
-          "original": "DeprecatedEventPayload",
-          "resolved": "any",
-          "references": {
-            "DeprecatedEventPayload": {
-              "location": "import",
-              "path": "../interfaces"
-            }
-          }
+          "original": "void",
+          "resolved": "void",
+          "references": {}
         }
       }, {
         "method": "calciteInputChange",
@@ -1404,6 +1461,25 @@ export class Input {
           "text": "Selects all text of the component's `value`.",
           "tags": []
         }
+      },
+      "internalSyncChildElValue": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }]
+        }
       }
     };
   }
@@ -1412,15 +1488,15 @@ export class Input {
     return [{
         "propName": "disabled",
         "methodName": "disabledWatcher"
-      }, {
-        "propName": "locale",
-        "methodName": "localeChanged"
       }, {
         "propName": "max",
         "methodName": "maxWatcher"
       }, {
         "propName": "min",
         "methodName": "minWatcher"
+      }, {
+        "propName": "messageOverrides",
+        "methodName": "onMessagesChange"
       }, {
         "propName": "value",
         "methodName": "valueWatcher"
@@ -1430,6 +1506,9 @@ export class Input {
       }, {
         "propName": "type",
         "methodName": "updateRequestedIcon"
+      }, {
+        "propName": "effectiveLocale",
+        "methodName": "effectiveLocaleChange"
       }];
   }
 }