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

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

@@ -1,9 +1,9 @@
 /*!
  * 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.95
+ * v1.0.0-beta.97
  */
-import { Component, Element, Event, h, Host, Method, Prop, Watch } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { getElementDir, getElementProp, getSlotted, setRequestedIcon } from "../../utils/dom";
 import { CSS, SLOTS, TEXT } from "./resources";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
@@ -24,23 +24,23 @@ export class InputText {
     /** Specifies the text alignment of the component's value. */
     this.alignment = "start";
     /**
-     * When true, the component is focused on page load.
+     * 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.
+     * When `true`, a clear button is displayed when the component has a value.
      */
     this.clearable = false;
     /**
-     * When true, interaction is prevented and the component is displayed with lower opacity.
+     * 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, the component will not be visible.
+     * When `true`, the component will not be visible.
      *
      * @mdn [hidden](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden)
      */
@@ -51,17 +51,17 @@ export class InputText {
      * @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`, the component is in the loading state and `calcite-progress` is displayed. */
     this.loading = false;
     /**
-     * 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)
      */
     this.readOnly = false;
-    /** When true, the component must have a value in order for the form to submit. */
+    /** 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";
@@ -292,10 +292,8 @@ export class InputText {
   // --------------------------------------------------------------------------
   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.clearInputTextValue, 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.clearInputTextValue, 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 prefixText = h("div", { class: CSS.prefix }, this.prefixText);
     const suffixText = h("div", { class: CSS.suffix }, this.suffixText);
@@ -303,610 +301,611 @@ export class InputText {
         [CSS.editingEnabled]: this.editingEnabled,
         [CSS.inlineChild]: !!this.inlineEditableEl
       }, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, enterKeyHint: this.el.enterKeyHint, inputMode: this.el.inputMode, maxLength: this.maxLength, minLength: this.minLength, name: this.name, onBlur: this.inputTextBlurHandler, onFocus: this.inputTextFocusHandler, onInput: this.inputTextInputHandler, onKeyDown: this.inputTextKeyDownHandler, placeholder: this.placeholder || "", readOnly: this.readOnly, ref: this.setChildElRef, required: this.required ? true : null, tabIndex: this.disabled || (this.inlineEditableEl && !this.editingEnabled) ? -1 : null, type: "text", value: this.value }));
-    return (h(Host, { onClick: this.inputTextFocusHandler, onKeyDown: this.keyDownHandler },
-      h("div", { class: { [CSS.inputWrapper]: true, [CSS_UTILITY.rtl]: dir === "rtl" } },
-        this.prefixText ? prefixText : null,
-        h("div", { class: CSS.wrapper },
-          childEl,
-          this.isClearable ? inputClearButton : null,
-          this.requestedIcon ? iconEl : null,
-          this.loading ? loader : null),
-        h("div", { class: CSS.actionWrapper },
-          h("slot", { name: SLOTS.action })),
-        this.suffixText ? suffixText : null,
-        h(HiddenFormInputSlot, { component: this }))));
+    return (h(Host, { onClick: this.inputTextFocusHandler, onKeyDown: this.keyDownHandler }, h("div", { class: { [CSS.inputWrapper]: true, [CSS_UTILITY.rtl]: dir === "rtl" } }, this.prefixText ? prefixText : null, h("div", { class: CSS.wrapper }, childEl, this.isClearable ? inputClearButton : null, this.requestedIcon ? iconEl : null, this.loading ? loader : null), h("div", { class: CSS.actionWrapper }, h("slot", { name: SLOTS.action })), this.suffixText ? suffixText : null, h(HiddenFormInputSlot, { component: this }))));
   }
   static get is() { return "calcite-input-text"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["input-text.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["input-text.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."
-      },
-      "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"
-    },
-    "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"
-    },
-    "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
-    },
-    "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"
+  static get originalStyleUrls() {
+    return {
+      "$": ["input-text.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["input-text.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 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": 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."
+        },
+        "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"
+      },
+      "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 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'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"
+      },
+      "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
+      },
+      "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"
+            }
           }
-        }
-      },
-      "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\""
-    },
-    "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"
-    },
-    "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 events() { return [{
-      "method": "calciteInternalInputTextFocus",
-      "name": "calciteInternalInputTextFocus",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [{
-            "name": "internal",
-            "text": undefined
-          }],
-        "text": ""
-      },
-      "complexType": {
-        "original": "{\n    element: HTMLInputElement;\n    value: string;\n  }",
-        "resolved": "{ element: HTMLInputElement; value: string; }",
-        "references": {
-          "HTMLInputElement": {
-            "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"
+            }
           }
-        }
+        },
+        "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\""
+      },
+      "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"
+      },
+      "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": "\"\""
       }
-    }, {
-      "method": "calciteInternalInputTextBlur",
-      "name": "calciteInternalInputTextBlur",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [{
-            "name": "internal",
-            "text": undefined
-          }],
-        "text": ""
-      },
-      "complexType": {
-        "original": "{ element: HTMLInputElement; value: string }",
-        "resolved": "{ element: HTMLInputElement; value: string; }",
-        "references": {
-          "HTMLInputElement": {
-            "location": "global"
+    };
+  }
+  static get events() {
+    return [{
+        "method": "calciteInternalInputTextFocus",
+        "name": "calciteInternalInputTextFocus",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": ""
+        },
+        "complexType": {
+          "original": "{\n    element: HTMLInputElement;\n    value: string;\n  }",
+          "resolved": "{ element: HTMLInputElement; value: string; }",
+          "references": {
+            "HTMLInputElement": {
+              "location": "global"
+            }
           }
         }
-      }
-    }, {
-      "method": "calciteInputTextInput",
-      "name": "calciteInputTextInput",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Fires each time a new value is typed."
-      },
-      "complexType": {
-        "original": "{\n    element: HTMLInputElement;\n    nativeEvent: MouseEvent | KeyboardEvent | InputEvent;\n    value: string;\n  }",
-        "resolved": "{ element: HTMLInputElement; nativeEvent: MouseEvent | KeyboardEvent | InputEvent; value: string; }",
-        "references": {
-          "HTMLInputElement": {
-            "location": "global"
-          },
-          "MouseEvent": {
-            "location": "global"
-          },
-          "KeyboardEvent": {
-            "location": "global"
-          },
-          "InputEvent": {
-            "location": "global"
+      }, {
+        "method": "calciteInternalInputTextBlur",
+        "name": "calciteInternalInputTextBlur",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": ""
+        },
+        "complexType": {
+          "original": "{ element: HTMLInputElement; value: string }",
+          "resolved": "{ element: HTMLInputElement; value: string; }",
+          "references": {
+            "HTMLInputElement": {
+              "location": "global"
+            }
           }
         }
-      }
-    }, {
-      "method": "calciteInputTextChange",
-      "name": "calciteInputTextChange",
-      "bubbles": true,
-      "cancelable": true,
-      "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"
-          }
+      }, {
+        "method": "calciteInputTextInput",
+        "name": "calciteInputTextInput",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fires each time a new value is typed."
         },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Sets focus on the component.",
-        "tags": []
-      }
-    },
-    "selectText": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
+        "complexType": {
+          "original": "{\n    element: HTMLInputElement;\n    nativeEvent: MouseEvent | KeyboardEvent | InputEvent;\n    value: string;\n  }",
+          "resolved": "{ element: HTMLInputElement; nativeEvent: KeyboardEvent | MouseEvent | InputEvent; value: string; }",
+          "references": {
+            "HTMLInputElement": {
+              "location": "global"
+            },
+            "MouseEvent": {
+              "location": "global"
+            },
+            "KeyboardEvent": {
+              "location": "global"
+            },
+            "InputEvent": {
+              "location": "global"
+            }
           }
+        }
+      }, {
+        "method": "calciteInputTextChange",
+        "name": "calciteInputTextChange",
+        "bubbles": true,
+        "cancelable": true,
+        "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": "value",
-      "methodName": "valueWatcher"
-    }, {
-      "propName": "icon",
-      "methodName": "updateRequestedIcon"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "disabled",
+        "methodName": "disabledWatcher"
+      }, {
+        "propName": "value",
+        "methodName": "valueWatcher"
+      }, {
+        "propName": "icon",
+        "methodName": "updateRequestedIcon"
+      }];
+  }
 }