@esri/calcite-components 1.0.0-next.596 → 1.0.0-next.597

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

@@ -1,23 +1,22 @@
 /*!
  * 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-next.596
+ * v1.0.0-next.597
  */
-import { Component, Element, Event, h, Host, Method, Prop, State, Watch } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { getElementDir, getElementProp, getSlotted, setRequestedIcon } from "../../utils/dom";
 import { CSS, INPUT_TYPE_ICONS, SLOTS, TEXT } from "./resources";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
 import { connectForm, disconnectForm, HiddenFormInputSlot, submitForm } from "../../utils/form";
-import { getDecimalSeparator, delocalizeNumberString, localizeNumberString, getLocale } from "../../utils/locale";
+import { defaultNumberingSystem, numberStringFormatter, disconnectLocalized, connectLocalized, updateEffectiveLocale } 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 { decimalPlaces } from "../../utils/math";
 import { createObserver } from "../../utils/observers";
 import { updateHostInteraction } from "../../utils/interactive";
-import { unwatchGlobalAttributes, watchGlobalAttributes } from "../../utils/globalAttributes";
 /**
- * @slot action - A slot for positioning a button next to the component.
+ * @slot action - A slot for positioning a `calcite-button` next to the component.
  */
 export class Input {
   constructor() {
@@ -35,7 +34,7 @@ export class Input {
      */
     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.
+     * 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;
     /**
@@ -55,25 +54,25 @@ export class Input {
      */
     this.hidden = false;
     /**
-     * Accessible name that will appear while loading.
+     * Accessible name when the component is loading.
      *
      * @default "Loading"
      */
     this.intlLoading = COMMON_TEXT.loading;
-    /** When true, the icon is flipped in RTL. */
+    /** When true, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
     this.iconFlipRtl = false;
-    /** When true, the component is in the loading state and `calcite-progress` is displayed. */
+    /** When true, a busy indicator is displayed. */
     this.loading = false;
     /**
-     * Toggles locale formatting for numbers.
+     * When true, uses locale formatting for numbers.
      *
      * @internal
      */
     this.localeFormat = false;
-    /** Specifies the placement of the buttons for type "number". */
+    /** Specifies the placement of the buttons for `type="number"`. */
     this.numberButtonType = "vertical";
     /**
-     * When true, the value cannot be modified.
+     * 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)
      */
@@ -91,7 +90,7 @@ export class Input {
     /**
      * Specifies the component type.
      *
-     * Note that the following types add type-specific icons by default: "date", "email", "password", "search", "tel", "time".
+     * 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. */
@@ -106,7 +105,7 @@ export class Input {
     //  State
     //
     //--------------------------------------------------------------------------
-    this.globalAttributes = {};
+    this.effectiveLocale = "";
     //--------------------------------------------------------------------------
     //
     //  Private Methods
@@ -174,7 +173,12 @@ export class Input {
         return;
       }
       const value = nativeEvent.target.value;
-      const delocalizedValue = delocalizeNumberString(value, getLocale(this));
+      numberStringFormatter.setOptions({
+        locale: this.effectiveLocale,
+        numberingSystem: this.numberingSystem,
+        useGrouping: this.groupSeparator
+      });
+      const delocalizedValue = numberStringFormatter.delocalize(value);
       if (nativeEvent.inputType === "insertFromPaste") {
         if (!isValidNumber(delocalizedValue)) {
           nativeEvent.preventDefault();
@@ -228,12 +232,16 @@ export class Input {
         }
         return;
       }
-      const decimalSeparator = getDecimalSeparator(getLocale(this));
-      if (event.key === decimalSeparator) {
+      numberStringFormatter.setOptions({
+        locale: this.effectiveLocale,
+        numberingSystem: this.numberingSystem,
+        useGrouping: this.groupSeparator
+      });
+      if (event.key === numberStringFormatter.decimal) {
         if (!this.value && !this.childNumberEl.value) {
           return;
         }
-        if (this.value && this.childNumberEl.value.indexOf(decimalSeparator) === -1) {
+        if (this.value && this.childNumberEl.value.indexOf(numberStringFormatter.decimal) === -1) {
           return;
         }
       }
@@ -332,29 +340,35 @@ export class Input {
           : newPreviousValue;
     };
     this.setValue = ({ committing = false, nativeEvent, origin, previousValue, value }) => {
-      const locale = getLocale(this);
-      const previousLocalizedValue = this.type === "number"
-        ? localizeNumberString(this.previousValue, locale, this.groupSeparator, this.numberingSystem)
-        : "";
-      const sanitizedValue = this.type === "number" ? sanitizeNumberString(value) : value;
-      const newValue = this.type === "number" && value && !sanitizedValue
-        ? isValidNumber(this.previousValue)
-          ? this.previousValue
-          : ""
-        : sanitizedValue;
-      const newLocalizedValue = this.type === "number"
-        ? localizeNumberString(newValue, locale, this.groupSeparator, this.numberingSystem)
-        : "";
-      this.setPreviousValue(previousValue || this.value);
-      this.previousValueOrigin = origin;
-      this.userChangedValue = origin === "user" && this.value !== newValue;
-      this.value = newValue;
+      numberStringFormatter.setOptions({
+        locale: this.effectiveLocale,
+        numberingSystem: this.numberingSystem,
+        useGrouping: this.groupSeparator
+      });
       if (this.type === "number") {
+        const delocalizedValue = (this.numberingSystem && this.numberingSystem !== "latn") ||
+          defaultNumberingSystem !== "latn"
+          ? numberStringFormatter.delocalize(value)
+          : value;
+        const sanitizedValue = sanitizeNumberString(delocalizedValue);
+        const newValue = (value && !sanitizedValue) || [".", "-"].includes(sanitizedValue)
+          ? isValidNumber(this.previousValue)
+            ? this.previousValue
+            : ""
+          : sanitizedValue;
+        const newLocalizedValue = numberStringFormatter.localize(newValue);
         this.localizedValue = newLocalizedValue;
+        this.userChangedValue = origin === "user" && this.value !== newValue;
+        this.value = newValue;
+        origin === "direct" && this.setInputValue(newLocalizedValue);
       }
-      if (origin === "direct") {
-        this.setInputValue(this.type === "number" ? newLocalizedValue : newValue);
+      else {
+        this.userChangedValue = origin === "user" && this.value !== value;
+        this.value = value;
+        origin === "direct" && this.setInputValue(value);
       }
+      this.setPreviousValue(previousValue || this.value);
+      this.previousValueOrigin = origin;
       if (nativeEvent) {
         const calciteInputInputEvent = this.calciteInputInput.emit({
           element: this.childEl,
@@ -363,7 +377,10 @@ export class Input {
         });
         if (calciteInputInputEvent.defaultPrevented) {
           this.value = this.previousValue;
-          this.localizedValue = previousLocalizedValue;
+          this.localizedValue =
+            this.type === "number"
+              ? numberStringFormatter.localize(this.previousValue)
+              : this.previousValue;
         }
         else if (committing) {
           this.emitChangeIfUserModified();
@@ -377,6 +394,9 @@ export class Input {
   disabledWatcher() {
     this.setDisabledAction();
   }
+  localeChanged() {
+    updateEffectiveLocale(this);
+  }
   /** watcher to update number-to-string for max */
   maxWatcher() {
     var _a;
@@ -420,12 +440,15 @@ export class Input {
   //--------------------------------------------------------------------------
   connectedCallback() {
     var _a;
+    connectLocalized(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");
     if (this.inlineEditableEl) {
       this.editingEnabled = this.inlineEditableEl.editingEnabled || false;
     }
+    connectLabel(this);
+    connectForm(this);
     this.setPreviousEmittedValue(this.value);
     this.setPreviousValue(this.value);
     if (this.type === "number") {
@@ -435,9 +458,6 @@ export class Input {
         value: isValidNumber(this.value) ? this.value : ""
       });
     }
-    connectLabel(this);
-    connectForm(this);
-    watchGlobalAttributes(this, ["lang"]);
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true });
     this.setDisabledAction();
     this.el.addEventListener("calciteInternalHiddenInputChange", this.hiddenInputChangeHandler);
@@ -446,7 +466,7 @@ export class Input {
     var _a;
     disconnectLabel(this);
     disconnectForm(this);
-    unwatchGlobalAttributes(this);
+    disconnectLocalized(this);
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     this.el.removeEventListener("calciteInternalHiddenInputChange", this.hiddenInputChangeHandler);
   }
@@ -564,25 +584,19 @@ 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.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 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: {
         [CSS.numberButtonItem]: true,
         [CSS.buttonItemHorizontal]: isHorizontalNumberButton
-      }, "data-adjustment": "up", disabled: this.disabled || this.readOnly, onPointerDown: this.numberButtonPointerDownHandler, onPointerOut: this.numberButtonPointerUpAndOutHandler, onPointerUp: this.numberButtonPointerUpAndOutHandler, tabIndex: -1, type: "button" },
-      h("calcite-icon", { icon: "chevron-up", scale: "s" })));
+      }, "data-adjustment": "up", disabled: this.disabled || this.readOnly, onPointerDown: this.numberButtonPointerDownHandler, onPointerOut: this.numberButtonPointerUpAndOutHandler, onPointerUp: this.numberButtonPointerUpAndOutHandler, tabIndex: -1, type: "button" }, h("calcite-icon", { icon: "chevron-up", scale: "s" })));
     const numberButtonsHorizontalDown = (h("button", { "aria-hidden": "true", class: {
         [CSS.numberButtonItem]: true,
         [CSS.buttonItemHorizontal]: isHorizontalNumberButton
-      }, "data-adjustment": "down", disabled: this.disabled || this.readOnly, onPointerDown: this.numberButtonPointerDownHandler, onPointerOut: this.numberButtonPointerUpAndOutHandler, onPointerUp: this.numberButtonPointerUpAndOutHandler, tabIndex: -1, type: "button" },
-      h("calcite-icon", { icon: "chevron-down", scale: "s" })));
-    const numberButtonsVertical = (h("div", { class: CSS.numberButtonWrapper },
-      numberButtonsHorizontalUp,
-      numberButtonsHorizontalDown));
+      }, "data-adjustment": "down", disabled: this.disabled || this.readOnly, onPointerDown: this.numberButtonPointerDownHandler, onPointerOut: this.numberButtonPointerUpAndOutHandler, onPointerUp: this.numberButtonPointerUpAndOutHandler, tabIndex: -1, type: "button" }, h("calcite-icon", { icon: "chevron-down", scale: "s" })));
+    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;
@@ -592,824 +606,827 @@ export class Input {
             [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 }),
-        this.isTextarea ? (h("div", { class: CSS.resizeIconWrapper },
-          h("calcite-icon", { icon: "chevron-down", scale: "s" }))) : null
+        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
-          ? 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
-          : null,
-        this.suffixText ? suffixText : null,
-        this.type === "number" && this.numberButtonType === "horizontal" && !this.readOnly
-          ? numberButtonsHorizontalUp
-          : null,
-        h(HiddenFormInputSlot, { component: this }))));
+    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
+      ? 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
+      : null, this.suffixText ? suffixText : null, this.type === "number" && this.numberButtonType === "horizontal" && !this.readOnly
+      ? numberButtonsHorizontalUp
+      : null, h(HiddenFormInputSlot, { component: this }))));
   }
   static get is() { return "calcite-input"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["input.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["input.css"]
-  }; }
-  static get properties() { return {
-    "alignment": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "Position",
-        "resolved": "\"end\" | \"start\"",
-        "references": {
-          "Position": {
-            "location": "import",
-            "path": "../interfaces"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Specifies the text alignment of the component's value."
-      },
-      "attribute": "alignment",
-      "reflect": true,
-      "defaultValue": "\"start\""
-    },
-    "autofocus": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "mdn",
-            "text": "[autofocus](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)"
-          }],
-        "text": "When true, the component is focused on page load."
-      },
-      "attribute": "autofocus",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "clearable": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "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."
-      },
-      "attribute": "clearable",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "mdn",
-            "text": "[disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled)"
-          }],
-        "text": "When true, interaction is prevented and the component is displayed with lower opacity."
-      },
-      "attribute": "disabled",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "groupSeparator": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When true, number values are displayed with the locale's group separator."
-      },
-      "attribute": "group-separator",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "hidden": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "mdn",
-            "text": "[hidden](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden)"
-          }],
-        "text": "When true, the component will not be visible."
-      },
-      "attribute": "hidden",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "icon": {
-      "type": "any",
-      "mutable": false,
-      "complexType": {
-        "original": "string | boolean",
-        "resolved": "boolean | string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When true, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon."
-      },
-      "attribute": "icon",
-      "reflect": true
-    },
-    "intlClear": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "A text label that will appear on the clear button for screen readers."
-      },
-      "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 that will appear while loading."
-      },
-      "attribute": "intl-loading",
-      "reflect": false,
-      "defaultValue": "COMMON_TEXT.loading"
-    },
-    "iconFlipRtl": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When true, the icon is flipped in RTL."
-      },
-      "attribute": "icon-flip-rtl",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Accessible name for the component's button or hyperlink."
-      },
-      "attribute": "label",
-      "reflect": false
-    },
-    "loading": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When true, the component is in the loading state and `calcite-progress` is displayed."
-      },
-      "attribute": "loading",
-      "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,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "name": "mdn",
-            "text": "[numberingSystem](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/numberingSystem)"
-          }],
-        "text": "Specifies the Unicode numeral system used by the component for localization."
-      },
-      "attribute": "numbering-system",
-      "reflect": true
-    },
-    "localeFormat": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "internal",
-            "text": undefined
-          }],
-        "text": "Toggles locale formatting for numbers."
-      },
-      "attribute": "locale-format",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "max": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "name": "mdn",
-            "text": "[max](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max)"
-          }],
-        "text": "Specifies the maximum value for type \"number\"."
-      },
-      "attribute": "max",
-      "reflect": true
-    },
-    "min": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "name": "mdn",
-            "text": "[min](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min)"
-          }],
-        "text": "Specifies the minimum value for type \"number\"."
-      },
-      "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,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "name": "mdn",
-            "text": "[maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength)"
-          }],
-        "text": "Specifies the maximum length of text for the component's value."
-      },
-      "attribute": "max-length",
-      "reflect": true
-    },
-    "minLength": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "name": "mdn",
-            "text": "[minlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength)"
-          }],
-        "text": "Specifies the minimum length of text for the component's value."
-      },
-      "attribute": "min-length",
-      "reflect": true
-    },
-    "name": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "mdn",
-            "text": "[name](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name)"
-          }],
-        "text": "Specifies the name of the component."
-      },
-      "attribute": "name",
-      "reflect": true
-    },
-    "numberButtonType": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "InputPlacement",
-        "resolved": "\"horizontal\" | \"none\" | \"vertical\"",
-        "references": {
-          "InputPlacement": {
-            "location": "import",
-            "path": "./interfaces"
+  static get originalStyleUrls() {
+    return {
+      "$": ["input.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["input.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "alignment": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Position",
+          "resolved": "\"end\" | \"start\"",
+          "references": {
+            "Position": {
+              "location": "import",
+              "path": "../interfaces"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Specifies the placement of the buttons for type \"number\"."
-      },
-      "attribute": "number-button-type",
-      "reflect": true,
-      "defaultValue": "\"vertical\""
-    },
-    "placeholder": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "mdn",
-            "text": "[placeholder](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder)"
-          }],
-        "text": "Specifies placeholder text for the component."
-      },
-      "attribute": "placeholder",
-      "reflect": false
-    },
-    "prefixText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Adds text to the start of the component."
-      },
-      "attribute": "prefix-text",
-      "reflect": false
-    },
-    "readOnly": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "mdn",
-            "text": "[readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)"
-          }],
-        "text": "When true, the value cannot be modified."
-      },
-      "attribute": "read-only",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "required": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When true, the component must have a value in order for the form to submit."
-      },
-      "attribute": "required",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "scale": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "Scale",
-        "resolved": "\"l\" | \"m\" | \"s\"",
-        "references": {
-          "Scale": {
-            "location": "import",
-            "path": "../interfaces"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the text alignment of the component's value."
+        },
+        "attribute": "alignment",
+        "reflect": true,
+        "defaultValue": "\"start\""
+      },
+      "autofocus": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "mdn",
+              "text": "[autofocus](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)"
+            }],
+          "text": "When true, the component is focused on page load."
+        },
+        "attribute": "autofocus",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "clearable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "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."
+        },
+        "attribute": "clearable",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "mdn",
+              "text": "[disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled)"
+            }],
+          "text": "When true, interaction is prevented and the component is displayed with lower opacity."
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "groupSeparator": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When true, number values are displayed with the locale's group separator."
+        },
+        "attribute": "group-separator",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "hidden": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "mdn",
+              "text": "[hidden](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden)"
+            }],
+          "text": "When true, the component will not be visible."
+        },
+        "attribute": "hidden",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "icon": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "string | boolean",
+          "resolved": "boolean | string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When true, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon."
+        },
+        "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,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When true, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`)."
+        },
+        "attribute": "icon-flip-rtl",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Accessible name for the component."
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "loading": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When true, a busy indicator is displayed."
+        },
+        "attribute": "loading",
+        "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,
+        "complexType": {
+          "original": "NumberingSystem",
+          "resolved": "\"arab\" | \"arabext\" | \"bali\" | \"beng\" | \"deva\" | \"fullwide\" | \"gujr\" | \"guru\" | \"hanidec\" | \"khmr\" | \"knda\" | \"laoo\" | \"latn\" | \"limb\" | \"mlym\" | \"mong\" | \"mymr\" | \"orya\" | \"tamldec\" | \"telu\" | \"thai\" | \"tibt\"",
+          "references": {
+            "NumberingSystem": {
+              "location": "import",
+              "path": "../../utils/locale"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Specifies the size of the component."
-      },
-      "attribute": "scale",
-      "reflect": true,
-      "defaultValue": "\"m\""
-    },
-    "status": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "Status",
-        "resolved": "\"idle\" | \"invalid\" | \"valid\"",
-        "references": {
-          "Status": {
-            "location": "import",
-            "path": "../interfaces"
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the Unicode numeral system used by the component for localization."
+        },
+        "attribute": "numbering-system",
+        "reflect": true
+      },
+      "localeFormat": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": "When true, uses locale formatting for numbers."
+        },
+        "attribute": "locale-format",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "max": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "mdn",
+              "text": "[max](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max)"
+            }],
+          "text": "Specifies the maximum value for type \"number\"."
+        },
+        "attribute": "max",
+        "reflect": true
+      },
+      "min": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "mdn",
+              "text": "[min](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min)"
+            }],
+          "text": "Specifies the minimum value for `type=\"number\"`."
+        },
+        "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,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "mdn",
+              "text": "[maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength)"
+            }],
+          "text": "Specifies the maximum length of text for the component's value."
+        },
+        "attribute": "max-length",
+        "reflect": true
+      },
+      "minLength": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "mdn",
+              "text": "[minlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength)"
+            }],
+          "text": "Specifies the minimum length of text for the component's value."
+        },
+        "attribute": "min-length",
+        "reflect": true
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "mdn",
+              "text": "[name](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name)"
+            }],
+          "text": "Specifies the name of the component on form submission."
+        },
+        "attribute": "name",
+        "reflect": true
+      },
+      "numberButtonType": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "InputPlacement",
+          "resolved": "\"horizontal\" | \"none\" | \"vertical\"",
+          "references": {
+            "InputPlacement": {
+              "location": "import",
+              "path": "./interfaces"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Specifies the status of the input field, which determines message and icons."
-      },
-      "attribute": "status",
-      "reflect": true,
-      "defaultValue": "\"idle\""
-    },
-    "step": {
-      "type": "any",
-      "mutable": false,
-      "complexType": {
-        "original": "number | \"any\"",
-        "resolved": "\"any\" | number",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "name": "mdn",
-            "text": "[step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/step)"
-          }],
-        "text": "Specifies the granularity that the component's value must adhere to."
-      },
-      "attribute": "step",
-      "reflect": true
-    },
-    "suffixText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Adds text to the end of the component."
-      },
-      "attribute": "suffix-text",
-      "reflect": false
-    },
-    "editingEnabled": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "internal",
-            "text": undefined
-          }],
-        "text": ""
-      },
-      "attribute": "editing-enabled",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "type": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "| \"color\"\n    | \"date\"\n    | \"datetime-local\"\n    | \"email\"\n    | \"file\"\n    | \"image\"\n    | \"month\"\n    | \"number\"\n    | \"password\"\n    | \"search\"\n    | \"tel\"\n    | \"text\"\n    | \"textarea\"\n    | \"time\"\n    | \"url\"\n    | \"week\"",
-        "resolved": "\"color\" | \"date\" | \"datetime-local\" | \"email\" | \"file\" | \"image\" | \"month\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"textarea\" | \"time\" | \"url\" | \"week\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Specifies the component type.\n\nNote that the following types add type-specific icons by default: \"date\", \"email\", \"password\", \"search\", \"tel\", \"time\"."
-      },
-      "attribute": "type",
-      "reflect": true,
-      "defaultValue": "\"text\""
-    },
-    "value": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The component's value."
-      },
-      "attribute": "value",
-      "reflect": false,
-      "defaultValue": "\"\""
-    }
-  }; }
-  static get states() { return {
-    "globalAttributes": {},
-    "localizedValue": {}
-  }; }
-  static get events() { return [{
-      "method": "calciteInternalInputFocus",
-      "name": "calciteInternalInputFocus",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [{
-            "name": "internal",
-            "text": undefined
-          }],
-        "text": ""
-      },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
-      }
-    }, {
-      "method": "calciteInternalInputBlur",
-      "name": "calciteInternalInputBlur",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [{
-            "name": "internal",
-            "text": undefined
-          }],
-        "text": ""
-      },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
-      }
-    }, {
-      "method": "calciteInputInput",
-      "name": "calciteInputInput",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Fires each time a new value is typed.\n\n**Note:**: The `el` and `value` event payload props are deprecated, please use the event's target/currentTarget instead"
-      },
-      "complexType": {
-        "original": "DeprecatedEventPayload",
-        "resolved": "any",
-        "references": {
-          "DeprecatedEventPayload": {
-            "location": "import",
-            "path": "../interfaces"
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the placement of the buttons for `type=\"number\"`."
+        },
+        "attribute": "number-button-type",
+        "reflect": true,
+        "defaultValue": "\"vertical\""
+      },
+      "placeholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "mdn",
+              "text": "[placeholder](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder)"
+            }],
+          "text": "Specifies placeholder text for the component."
+        },
+        "attribute": "placeholder",
+        "reflect": false
+      },
+      "prefixText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Adds text to the start of the component."
+        },
+        "attribute": "prefix-text",
+        "reflect": false
+      },
+      "readOnly": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "mdn",
+              "text": "[readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)"
+            }],
+          "text": "When true, the component's value can be read, but cannot be modified."
+        },
+        "attribute": "read-only",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "required": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When true, the component must have a value in order for the form to submit."
+        },
+        "attribute": "required",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "scale": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "Scale",
+          "resolved": "\"l\" | \"m\" | \"s\"",
+          "references": {
+            "Scale": {
+              "location": "import",
+              "path": "../interfaces"
+            }
           }
-        }
-      }
-    }, {
-      "method": "calciteInputChange",
-      "name": "calciteInputChange",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Fires each time a new value is typed and committed."
-      },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
-      }
-    }]; }
-  static get methods() { return {
-    "setFocus": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the size of the component."
+        },
+        "attribute": "scale",
+        "reflect": true,
+        "defaultValue": "\"m\""
+      },
+      "status": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "Status",
+          "resolved": "\"idle\" | \"invalid\" | \"valid\"",
+          "references": {
+            "Status": {
+              "location": "import",
+              "path": "../interfaces"
+            }
           }
         },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Sets focus on the component.",
-        "tags": []
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the status of the input field, which determines message and icons."
+        },
+        "attribute": "status",
+        "reflect": true,
+        "defaultValue": "\"idle\""
+      },
+      "step": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "number | \"any\"",
+          "resolved": "\"any\" | number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "mdn",
+              "text": "[step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/step)"
+            }],
+          "text": "Specifies the granularity the component's value must adhere to."
+        },
+        "attribute": "step",
+        "reflect": true
+      },
+      "suffixText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Adds text to the end of the component."
+        },
+        "attribute": "suffix-text",
+        "reflect": false
+      },
+      "editingEnabled": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": ""
+        },
+        "attribute": "editing-enabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "| \"color\"\n    | \"date\"\n    | \"datetime-local\"\n    | \"email\"\n    | \"file\"\n    | \"image\"\n    | \"month\"\n    | \"number\"\n    | \"password\"\n    | \"search\"\n    | \"tel\"\n    | \"text\"\n    | \"textarea\"\n    | \"time\"\n    | \"url\"\n    | \"week\"",
+          "resolved": "\"color\" | \"date\" | \"datetime-local\" | \"email\" | \"file\" | \"image\" | \"month\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"textarea\" | \"time\" | \"url\" | \"week\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the component type.\n\nNote that the following `type`s add type-specific icons by default: `\"date\"`, `\"email\"`, `\"password\"`, `\"search\"`, `\"tel\"`, `\"time\"`."
+        },
+        "attribute": "type",
+        "reflect": true,
+        "defaultValue": "\"text\""
+      },
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The component's value."
+        },
+        "attribute": "value",
+        "reflect": false,
+        "defaultValue": "\"\""
       }
-    },
-    "selectText": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
+    };
+  }
+  static get states() {
+    return {
+      "effectiveLocale": {},
+      "localizedValue": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "calciteInternalInputFocus",
+        "name": "calciteInternalInputFocus",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": ""
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }, {
+        "method": "calciteInternalInputBlur",
+        "name": "calciteInternalInputBlur",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": ""
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }, {
+        "method": "calciteInputInput",
+        "name": "calciteInputInput",
+        "bubbles": true,
+        "cancelable": true,
+        "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."
+        },
+        "complexType": {
+          "original": "DeprecatedEventPayload",
+          "resolved": "any",
+          "references": {
+            "DeprecatedEventPayload": {
+              "location": "import",
+              "path": "../interfaces"
+            }
           }
+        }
+      }, {
+        "method": "calciteInputChange",
+        "name": "calciteInputChange",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fires each time a new `value` is typed and committed."
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "setFocus": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "Sets focus on the component.",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "Selects all text of the component's `value`.",
-        "tags": []
+      "selectText": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Selects all text of the component's `value`.",
+          "tags": []
+        }
       }
-    }
-  }; }
+    };
+  }
   static get elementRef() { return "el"; }
-  static get watchers() { return [{
-      "propName": "disabled",
-      "methodName": "disabledWatcher"
-    }, {
-      "propName": "max",
-      "methodName": "maxWatcher"
-    }, {
-      "propName": "min",
-      "methodName": "minWatcher"
-    }, {
-      "propName": "value",
-      "methodName": "valueWatcher"
-    }, {
-      "propName": "icon",
-      "methodName": "updateRequestedIcon"
-    }, {
-      "propName": "type",
-      "methodName": "updateRequestedIcon"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "disabled",
+        "methodName": "disabledWatcher"
+      }, {
+        "propName": "locale",
+        "methodName": "localeChanged"
+      }, {
+        "propName": "max",
+        "methodName": "maxWatcher"
+      }, {
+        "propName": "min",
+        "methodName": "minWatcher"
+      }, {
+        "propName": "value",
+        "methodName": "valueWatcher"
+      }, {
+        "propName": "icon",
+        "methodName": "updateRequestedIcon"
+      }, {
+        "propName": "type",
+        "methodName": "updateRequestedIcon"
+      }];
+  }
 }