@esri/calcite-components 3.2.0-next.9 → 3.2.0

package/dist/components/calcite-input-number/customElement.d.ts

@@ -11,9 +11,13 @@ import { NumericInputComponent, TextualInputComponent } from '../calcite-input/c
 import { IconNameOrString } from '../calcite-icon/interfaces';
 import { Label } from '../calcite-label/customElement.js';
 
-/** @slot action - A slot for positioning a button next to the component. */
+/** @slot [action] - A slot for positioning a button next to the component. */
 export declare class InputNumber extends LitElement {
-    /** Specifies the text alignment of the component's value. */
+    /**
+     * Specifies the text alignment of the component's value.
+     *
+     * @default "start"
+     */
     alignment: Extract<"start" | "end", Alignment>;
     /**
      * Specifies the type of content to autocomplete, for use in forms.
@@ -22,12 +26,17 @@ export declare class InputNumber extends LitElement {
      * @mdn [autocomplete](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)
      */
     autocomplete: AutoFill;
-    /** 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.
+     *
+     * @default false
+     */
     clearable: boolean;
     /**
      * 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)
+     * @default false
      */
     disabled: boolean;
     /**
@@ -36,7 +45,11 @@ export declare class InputNumber extends LitElement {
      * When not set, the component will be associated with its ancestor form element, if any.
      */
     form: string;
-    /** When `true`, number values are displayed with a group separator corresponding to the language and country format. */
+    /**
+     * When `true`, number values are displayed with a group separator corresponding to the language and country format.
+     *
+     * @default false
+     */
     groupSeparator: boolean;
     /**
      * Specifies an icon to display.
@@ -44,13 +57,25 @@ export declare class InputNumber extends LitElement {
      * @futureBreaking Remove boolean type as it is not supported.
      */
     icon: IconNameOrString | boolean;
-    /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
+    /**
+     * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
+     *
+     * @default false
+     */
     iconFlipRtl: boolean;
-    /** When `true`, restricts the component to integer numbers only and disables exponential notation. */
+    /**
+     * When `true`, restricts the component to integer numbers only and disables exponential notation.
+     *
+     * @default false
+     */
     integer: boolean;
     /** Accessible name for the component's button or hyperlink. */
     label: string;
-    /** 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.
+     *
+     * @default false
+     */
     loading: boolean;
     /**
      * When the component resides in a form,
@@ -69,18 +94,6 @@ export declare class InputNumber extends LitElement {
     maxLength: number;
     /** Use this property to override individual strings used by the component. */
     messageOverrides?: typeof this.messages._overrides;
-    /**
-     * Made into a prop for testing purposes only
-     *
-     * @private
-     */
-    private messages: Partial<{
-        clear: string;
-        loading: string;
-    }> & import('@arcgis/components-controllers').T9nMeta<{
-        clear: string;
-        loading: string;
-    }>;
     /**
      * When the component resides in a form,
      * specifies the minimum value.
@@ -104,7 +117,11 @@ export declare class InputNumber extends LitElement {
      * @mdn [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name)
      */
     name: string;
-    /** Specifies the placement of the buttons. */
+    /**
+     * Specifies the placement of the buttons.
+     *
+     * @default "vertical"
+     */
     numberButtonType: InputPlacement;
     /** Specifies the Unicode numeral system used by the component for localization. */
     numberingSystem: NumberingSystem;
@@ -120,16 +137,27 @@ export declare class InputNumber extends LitElement {
      * 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)
+     * @default false
      */
     readOnly: boolean;
     /**
      * When `true` and the component resides in a form,
      * the component must have a value in order for the form to submit.
+     *
+     * @default false
      */
     required: boolean;
-    /** Specifies the size of the component. */
+    /**
+     * Specifies the size of the component.
+     *
+     * @default "m"
+     */
     scale: Scale;
-    /** Specifies the status of the input field, which determines message and icons. */
+    /**
+     * Specifies the status of the input field, which determines message and icons.
+     *
+     * @default "idle"
+     */
     status: Status;
     /**
      * Specifies the granularity that the component's value must adhere to.
@@ -146,7 +174,6 @@ export declare class InputNumber extends LitElement {
     /**
      * The current validation state of the component.
      *
-     * @readonly
      * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)
      */
     readonly validity: MutableValidityState;
@@ -158,7 +185,14 @@ export declare class InputNumber extends LitElement {
     /** Sets focus on the component. */
     setFocus(): Promise<void>;
     /** Fires each time a new value is typed and committed. */
-    readonly calciteInputNumberChange: TargetedEvent<this, undefined>;
+    readonly calciteInputNumberChange: TargetedEvent<this, void>;
     /** Fires each time a new value is typed. */
-    readonly calciteInputNumberInput: TargetedEvent<this, undefined>;
+    readonly calciteInputNumberInput: TargetedEvent<this, void>;
+    private messages: Partial<{
+        clear: string;
+        loading: string;
+    }> & import('@arcgis/lumina/controllers').T9nMeta<{
+        clear: string;
+        loading: string;
+    }>;
 }

package/dist/components/calcite-input-number/customElement.js

@@ -1,13 +1,13 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.2.0-next.9 */
+v3.2.0 */
 import { C as CSS_UTILITY, c as customElement } from "../../chunks/runtime.js";
 import { live } from "lit-html/directives/live.js";
 import { keyed } from "lit-html/directives/keyed.js";
 import { html, nothing } from "lit";
 import { createRef, ref } from "lit-html/directives/ref.js";
 import { LitElement, createEvent, stringOrBoolean, safeClassMap } from "@arcgis/lumina";
-import { useWatchAttributes } from "@arcgis/components-controllers";
+import { useWatchAttributes } from "@arcgis/lumina/controllers";
 import { v as setRequestedIcon, i as isPrimaryPointerButton, g as getElementDir } from "../../chunks/dom.js";
 import { c as connectForm, i as internalHiddenInputInputEvent, d as disconnectForm, s as submitForm, H as HiddenFormInputSlot } from "../../chunks/form.js";
 import { u as updateHostInteraction, I as InteractiveContainer } from "../../chunks/interactive.js";
@@ -22,6 +22,7 @@ import { css } from "@lit/reactive-element/css-tag.js";
 const CSS = {
   loader: "loader",
   clearButton: "clear-button",
+  clearable: "clearable",
   inputIcon: "icon",
   prefix: "prefix",
   suffix: "suffix",
@@ -30,7 +31,9 @@ const CSS = {
   wrapper: "element-wrapper",
   inputWrapper: "wrapper",
   actionWrapper: "action-wrapper",
-  numberButtonItem: "number-button-item"
+  numberButtonItem: "number-button-item",
+  hasSuffix: "has-suffix",
+  hasPrefix: "has-prefix"
 };
 const IDS = {
   validationMessage: "inputNumberValidationMessage"
@@ -38,10 +41,8 @@ const IDS = {
 const SLOTS = {
   action: "action"
 };
-const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block}:host([scale=s]) input,:host([scale=s]) .prefix,:host([scale=s]) .suffix{block-size:1.5rem;padding-inline:.5rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=s]) .number-button-wrapper,:host([scale=s]) .action-wrapper calcite-button,:host([scale=s]) .action-wrapper calcite-button button{block-size:1.5rem}:host([scale=s]) .clear-button{min-block-size:1.5rem;min-inline-size:1.5rem}:host([scale=m]) input,:host([scale=m]) .prefix,:host([scale=m]) .suffix{block-size:2rem;padding-inline:.75rem;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=m]) .number-button-wrapper,:host([scale=m]) .action-wrapper calcite-button,:host([scale=m]) .action-wrapper calcite-button button{block-size:2rem}:host([scale=m]) .clear-button{min-block-size:2rem;min-inline-size:2rem}:host([scale=l]) input,:host([scale=l]) .prefix,:host([scale=l]) .suffix{block-size:2.75rem;padding-inline:1rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host([scale=l]) .number-button-wrapper,:host([scale=l]) .action-wrapper calcite-button,:host([scale=l]) .action-wrapper calcite-button button{block-size:2.75rem}:host([scale=l]) .clear-button{min-block-size:2.75rem;min-inline-size:2.75rem}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}input{transition:var(--calcite-animation-timing),block-size 0,outline-offset 0s;-webkit-appearance:none;position:relative;margin:0;box-sizing:border-box;display:flex;max-block-size:100%;inline-size:100%;max-inline-size:100%;flex:1 1 0%;text-overflow:ellipsis;border-radius:0;background-color:var(--calcite-color-foreground-1);font-family:inherit;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-1)}input:placeholder-shown{text-overflow:ellipsis}input{border-width:1px;border-style:solid;border-color:var(--calcite-color-border-input);color:var(--calcite-color-text-1)}input::placeholder,input:-ms-input-placeholder,input::-ms-input-placeholder{font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-3)}input:focus{border-color:var(--calcite-color-brand);color:var(--calcite-color-text-1)}input[readonly]{background-color:var(--calcite-color-background);font-weight:var(--calcite-font-weight-medium)}input[readonly]:focus{color:var(--calcite-color-text-1)}calcite-icon{color:var(--calcite-color-text-3)}input{outline-color:transparent}input:focus{outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}:host([status=invalid]) input{border-color:var(--calcite-color-status-danger)}:host([status=invalid]) input:focus{outline:2px solid var(--calcite-color-status-danger);outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}:host([scale=s]) .icon{inset-inline-start:.5rem}:host([scale=m]) .icon{inset-inline-start:.75rem}:host([scale=l]) .icon{inset-inline-start:1rem}:host([icon][scale=s]) input{padding-inline-start:2rem}:host([icon][scale=m]) input{padding-inline-start:2.5rem}:host([icon][scale=l]) input{padding-inline-start:3.5rem}.element-wrapper{position:relative;order:3;display:inline-flex;flex:1 1 0%;align-items:center}.icon{pointer-events:none;position:absolute;z-index:var(--calcite-z-index);display:block;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out}.clear-button{pointer-events:initial;order:4;margin:0;box-sizing:border-box;display:flex;min-block-size:100%;cursor:pointer;align-items:center;justify-content:center;align-self:stretch;border-width:1px;border-style:solid;border-color:var(--calcite-color-border-input);background-color:var(--calcite-color-foreground-1);outline-color:transparent;border-inline-start-width:0px}.clear-button:hover{background-color:var(--calcite-color-foreground-2);transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out}.clear-button:hover calcite-icon{color:var(--calcite-color-text-1);transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out}.clear-button:active{background-color:var(--calcite-color-foreground-3)}.clear-button:active calcite-icon{color:var(--calcite-color-text-1)}.clear-button:focus{outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.clear-button:disabled{opacity:var(--calcite-opacity-disabled)}.loader{inset-block-start:1px;inset-inline:1px;pointer-events:none;position:absolute;display:block}.action-wrapper{order:7;display:flex}.prefix,.suffix{box-sizing:border-box;display:flex;block-size:auto;min-block-size:100%;-webkit-user-select:none;user-select:none;align-content:center;align-items:center;overflow-wrap:break-word;border-width:1px;border-style:solid;border-color:var(--calcite-color-border-input);background-color:var(--calcite-color-background);font-weight:var(--calcite-font-weight-medium);line-height:1;color:var(--calcite-color-text-2)}.prefix{order:2;border-inline-end-width:0px;inline-size:var(--calcite-input-prefix-size, auto)}.suffix{order:5;border-inline-start-width:0px;inline-size:var(--calcite-input-suffix-size, auto)}:host([alignment=start]) input{text-align:start}:host([alignment=end]) input{text-align:end}.number-button-wrapper{pointer-events:none;order:6;box-sizing:border-box;display:flex;flex-direction:column;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out}:host([number-button-type=vertical]) .wrapper{flex-direction:row;display:flex}:host([number-button-type=vertical]) input{order:2}:host([number-button-type=horizontal]) .calcite--rtl .number-button-item[data-adjustment=down] calcite-icon{transform:rotate(-90deg)}:host([number-button-type=horizontal]) .calcite--rtl .number-button-item[data-adjustment=up] calcite-icon{transform:rotate(-90deg)}.number-button-item.number-button-item--horizontal[data-adjustment=down],.number-button-item.number-button-item--horizontal[data-adjustment=up]{order:1;max-block-size:100%;min-block-size:100%;align-self:stretch}.number-button-item.number-button-item--horizontal[data-adjustment=down] calcite-icon,.number-button-item.number-button-item--horizontal[data-adjustment=up] calcite-icon{transform:rotate(90deg)}.number-button-item.number-button-item--horizontal[data-adjustment=down]{border-width:1px;border-style:solid;border-color:var(--calcite-color-border-input);border-inline-end-width:0px}.number-button-item.number-button-item--horizontal[data-adjustment=down]:hover{background-color:var(--calcite-color-foreground-2)}.number-button-item.number-button-item--horizontal[data-adjustment=down]:hover calcite-icon{color:var(--calcite-color-text-1)}.number-button-item.number-button-item--horizontal[data-adjustment=up]{order:5}.number-button-item.number-button-item--horizontal[data-adjustment=up]:hover{background-color:var(--calcite-color-foreground-2)}.number-button-item.number-button-item--horizontal[data-adjustment=up]:hover calcite-icon{color:var(--calcite-color-text-1)}:host([number-button-type=vertical]) .number-button-item[data-adjustment=down]:hover{background-color:var(--calcite-color-foreground-2)}:host([number-button-type=vertical]) .number-button-item[data-adjustment=down]:hover calcite-icon{color:var(--calcite-color-text-1)}:host([number-button-type=vertical]) .number-button-item[data-adjustment=up]:hover{background-color:var(--calcite-color-foreground-2)}:host([number-button-type=vertical]) .number-button-item[data-adjustment=up]:hover calcite-icon{color:var(--calcite-color-text-1)}:host([number-button-type=vertical]) .number-button-item[data-adjustment=down]{border-block-start-width:0px}.number-button-item{max-block-size:50%;min-block-size:50%;pointer-events:initial;margin:0;box-sizing:border-box;display:flex;cursor:pointer;align-items:center;align-self:center;border-width:1px;border-style:solid;border-color:var(--calcite-color-border-input);background-color:var(--calcite-color-foreground-1);padding-block:0px;padding-inline:.5rem;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;border-inline-start-width:0px}.number-button-item calcite-icon{pointer-events:none;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out}.number-button-item:focus{background-color:var(--calcite-color-foreground-2)}.number-button-item:focus calcite-icon{color:var(--calcite-color-text-1)}.number-button-item:active{background-color:var(--calcite-color-foreground-3)}.number-button-item:disabled{pointer-events:none}.wrapper{position:relative;display:flex;flex-direction:row;align-items:center}:host(.no-bottom-border) input{border-block-end-width:0px}:host(.border-top-color-one) input{border-block-start-color:var(--calcite-color-border-1)}input.inline-child{background-color:transparent;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out}input.inline-child .editing-enabled{background-color:inherit}input.inline-child:not(.editing-enabled){display:flex;cursor:pointer;text-overflow:ellipsis;border-color:transparent;padding-inline-start:0}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:.5rem}:host([scale=s]) .validation-container{padding-block-start:.25rem}::slotted(input[slot=hidden-form-input]){margin:0!important;opacity:0!important;outline:none!important;padding:0!important;position:absolute!important;inset:0!important;transform:none!important;-webkit-appearance:none!important;z-index:-1!important}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block}:host([scale=s]) input,:host([scale=s]) .prefix,:host([scale=s]) .suffix{padding-inline:.5rem;font-size:var(--calcite-font-size--2);line-height:1rem;block-size:var(--calcite-input-number-height, 1.5rem)}:host([scale=s]) .number-button-wrapper,:host([scale=s]) .action-wrapper calcite-button,:host([scale=s]) .action-wrapper calcite-button button{block-size:var(--calcite-input-number-height, 1.5rem)}:host([scale=s]) .clear-button{min-block-size:1.5rem;min-inline-size:1.5rem}:host([scale=m]) input,:host([scale=m]) .prefix,:host([scale=m]) .suffix{padding-inline:.75rem;font-size:var(--calcite-font-size--1);line-height:1rem;block-size:var(--calcite-input-number-height, 2rem)}:host([scale=m]) .number-button-wrapper,:host([scale=m]) .action-wrapper calcite-button,:host([scale=m]) .action-wrapper calcite-button button{block-size:var(--calcite-input-number-height, 2rem)}:host([scale=m]) .clear-button{min-block-size:2rem;min-inline-size:2rem}:host([scale=l]) input,:host([scale=l]) .prefix,:host([scale=l]) .suffix{padding-inline:1rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;block-size:var(--calcite-input-number-height, 2.75rem)}:host([scale=l]) .number-button-wrapper,:host([scale=l]) .action-wrapper calcite-button,:host([scale=l]) .action-wrapper calcite-button button{block-size:var(--calcite-input-number-height, 2.75rem)}:host([scale=l]) .clear-button{min-block-size:2.75rem;min-inline-size:2.75rem}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}input{transition:var(--calcite-animation-timing),block-size 0,outline-offset 0s;-webkit-appearance:none;position:relative;margin:0;box-sizing:border-box;display:flex;max-block-size:100%;inline-size:100%;max-inline-size:100%;flex:1 1 0%;text-overflow:ellipsis;font-family:inherit;font-weight:var(--calcite-font-weight-normal);background-color:var(--calcite-input-number-background-color, var(--calcite-color-foreground-1));color:var(--calcite-input-number-text-color, var(--calcite-color-text-1));border-radius:var(--calcite-input-number-corner-radius, var(--calcite-corner-radius-sharp))}input:placeholder-shown{text-overflow:ellipsis}input{border-width:1px;border-style:solid;border-color:var(--calcite-input-number-border-color, var(--calcite-color-border-input))}input::placeholder,input:-ms-input-placeholder,input::-ms-input-placeholder{font-weight:var(--calcite-font-weight-normal);color:var(--calcite-input-number-placeholder-text-color, var(--calcite-color-text-3))}input:focus{border-color:var(--calcite-color-brand);color:var(--calcite-input-number-text-color-focus, var(--calcite-color-text-1))}input[readonly]{font-weight:var(--calcite-font-weight-medium);background-color:var(--calcite-input-number-background-color, var(--calcite-color-background))}input[readonly]:focus{color:var(--calcite-input-number-text-color-focus, var(--calcite-color-text-1))}calcite-icon{color:var(--calcite-input-actions-icon-color, var(--calcite-color-text-3))}input{outline-color:transparent}input:focus{outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}:host([status=invalid]) input{border-color:var(--calcite-color-status-danger)}:host([status=invalid]) input:focus{outline:2px solid var(--calcite-color-status-danger);outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}:host([scale=s]) .icon{inset-inline-start:.5rem}:host([scale=m]) .icon{inset-inline-start:.75rem}:host([scale=l]) .icon{inset-inline-start:1rem}:host([icon][scale=s]) input{padding-inline-start:2rem}:host([icon][scale=m]) input{padding-inline-start:2.5rem}:host([icon][scale=l]) input{padding-inline-start:3.5rem}.element-wrapper{position:relative;order:3;display:inline-flex;flex:1 1 0%;align-items:center}.icon{pointer-events:none;position:absolute;z-index:var(--calcite-z-index);display:block;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out}.clear-button{pointer-events:initial;order:4;margin:0;box-sizing:border-box;display:flex;min-block-size:100%;cursor:pointer;align-items:center;justify-content:center;align-self:stretch;border-width:1px;border-style:solid;outline-color:transparent;border-color:var(--calcite-input-number-border-color, var(--calcite-color-border-input));background-color:var(--calcite-input-actions-background-color, var(--calcite-color-foreground-1));border-inline-start-width:0px}.clear-button:hover{transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;background-color:var(--calcite-input-actions-background-color-hover, var(--calcite-color-foreground-2))}.clear-button:hover calcite-icon{transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;color:var(--calcite-input-actions-icon-color-hover, var(--calcite-color-text-1))}.clear-button:active{background-color:var(--calcite-input-actions-background-color-press, var(--calcite-color-foreground-3))}.clear-button:active calcite-icon{color:var(--calcite-input-actions-icon-color-press, var(--calcite-color-text-1))}.clear-button:focus{outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.clear-button:disabled{opacity:var(--calcite-opacity-disabled)}.loader{inset-block-start:1px;inset-inline:1px;pointer-events:none;position:absolute;display:block}.loader calcite-progress{--calcite-progress-background-color: var(--calcite-input-loading-background-color);--calcite-progress-fill-color: var(--calcite-input-loading-fill-color)}.action-wrapper{order:7;display:flex}.prefix,.suffix{box-sizing:border-box;display:flex;block-size:auto;min-block-size:100%;-webkit-user-select:none;user-select:none;align-content:center;align-items:center;overflow-wrap:break-word;border-width:1px;border-style:solid;font-weight:var(--calcite-font-weight-medium);line-height:1;border-color:var(--calcite-input-number-border-color, var(--calcite-color-border-input))}.prefix{order:2;border-inline-end-width:0px;inline-size:var(--calcite-input-prefix-size, auto);background-color:var(--calcite-input-prefix-background-color, var(--calcite-color-background));color:var(--calcite-input-prefix-text-color, var(--calcite-color-text-2))}.suffix{order:5;border-inline-start-width:0px;inline-size:var(--calcite-input-suffix-size, auto);background-color:var(--calcite-input-suffix-background-color, var(--calcite-color-background));color:var(--calcite-input-suffix-text-color, var(--calcite-color-text-2))}:host([alignment=start]) input{text-align:start}:host([alignment=end]) input{text-align:end}.number-button-wrapper{pointer-events:none;order:6;box-sizing:border-box;display:flex;flex-direction:column;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out}:host([number-button-type=vertical]) .wrapper{flex-direction:row;display:flex}:host([number-button-type=vertical]) input{order:2}:host([number-button-type=horizontal]) .calcite--rtl .number-button-item[data-adjustment=down] calcite-icon{transform:rotate(-90deg)}:host([number-button-type=horizontal]) .calcite--rtl .number-button-item[data-adjustment=up] calcite-icon{transform:rotate(-90deg)}.number-button-item.number-button-item--horizontal[data-adjustment=down],.number-button-item.number-button-item--horizontal[data-adjustment=up]{order:1;max-block-size:100%;min-block-size:100%;align-self:stretch}.number-button-item.number-button-item--horizontal[data-adjustment=down] calcite-icon,.number-button-item.number-button-item--horizontal[data-adjustment=up] calcite-icon{transform:rotate(90deg)}.number-button-item.number-button-item--horizontal[data-adjustment=down]{border-inline-start-width:1px;border-inline-end-width:0px}.number-button-item.number-button-item--horizontal[data-adjustment=up]{order:5}:host([number-button-type=vertical]) .number-button-item[data-adjustment=down]{border-block-start-width:0px}.number-button-item{max-block-size:50%;min-block-size:50%;pointer-events:initial;margin:0;box-sizing:border-box;display:flex;cursor:pointer;align-items:center;align-self:center;border-width:1px;border-style:solid;padding-block:0px;padding-inline:.5rem;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;border-inline-start-width:0px;border-color:var(--calcite-input-number-border-color, var(--calcite-color-border-input));background-color:var(--calcite-input-actions-background-color, var(--calcite-color-foreground-1))}.number-button-item calcite-icon{pointer-events:none;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out}.number-button-item:disabled{pointer-events:none}.number-button-item:hover{background-color:var(--calcite-input-actions-background-color-hover, var(--calcite-color-foreground-2))}.number-button-item:hover calcite-icon{color:var(--calcite-input-actions-icon-color-hover, var(--calcite-color-text-1))}.number-button-item:active{background-color:var(--calcite-input-actions-background-color-press, var(--calcite-color-foreground-3))}.number-button-item:active calcite-icon{color:var(--calcite-input-actions-icon-color-press, var(--calcite-color-text-1))}.prefix,:host([number-button-type=horizontal]) .number-button-item[data-adjustment=down]{border-start-start-radius:var(--calcite-input-number-corner-radius, var(--calcite-corner-radius-sharp));border-end-start-radius:var(--calcite-input-number-corner-radius, var(--calcite-corner-radius-sharp))}:host([read-only]) .suffix,:host([read-only]) .wrapper:not(.has-suffix) .clear-button,:host([number-button-type=horizontal]) .number-button-item[data-adjustment=up]{border-end-end-radius:var(--calcite-input-number-corner-radius, var(--calcite-corner-radius-sharp));border-start-end-radius:var(--calcite-input-number-corner-radius, var(--calcite-corner-radius-sharp))}:host([number-button-type=vertical]) .number-button-item[data-adjustment=down]{border-block-start-width:0px;border-end-end-radius:var(--calcite-input-number-corner-radius, var(--calcite-corner-radius-sharp))}:host([number-button-type=vertical]) .number-button-item[data-adjustment=up]{border-start-end-radius:var(--calcite-input-number-corner-radius, var(--calcite-corner-radius-sharp))}:host(:not([read-only])[number-button-type=horizontal]) .prefix,:host(:not([read-only])[number-button-type=horizontal]) input,.has-prefix input{border-start-start-radius:0;border-end-start-radius:0}.has-suffix input,:host .clearable input,:host(:not([read-only])) input,:host .suffix,:host .clear-button{border-start-end-radius:0;border-end-end-radius:0}:host .wrapper{position:relative;display:flex;flex-direction:row;align-items:center}:host(.no-bottom-border) input{border-block-end-width:0px}:host(.border-top-color-one) input{border-block-start-color:var(--calcite-color-border-1)}input.inline-child{background-color:transparent;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out}input.inline-child .editing-enabled{background-color:inherit}input.inline-child:not(.editing-enabled){display:flex;cursor:pointer;text-overflow:ellipsis;border-color:transparent;padding-inline-start:0}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:.5rem}:host([scale=s]) .validation-container{padding-block-start:.25rem}::slotted(input[slot=hidden-form-input]){margin:0!important;opacity:0!important;outline:none!important;padding:0!important;position:absolute!important;inset:0!important;transform:none!important;-webkit-appearance:none!important;z-index:-1!important}:host([hidden]){display:none}[hidden]{display:none}::placeholder{font-weight:var(--calcite-font-weight-normal);color:var(--calcite-input-placeholder-text-color, var(--calcite-color-text-3))}`;
 class InputNumber extends LitElement {
-  // #endregion
-  // #region Lifecycle
   constructor() {
     super();
     this.actionWrapperEl = createRef();
@@ -60,6 +61,7 @@ class InputNumber extends LitElement {
     this.previousValueOrigin = "initial";
     this.userChangedValue = false;
     this._value = "";
+    this.messages = useT9n();
     this.slottedActionElDisabledInternally = false;
     this.alignment = "start";
     this.clearable = false;
@@ -70,7 +72,6 @@ class InputNumber extends LitElement {
     this.integer = false;
     this.loading = false;
     this.localeFormat = false;
-    this.messages = useT9n();
     this.numberButtonType = "vertical";
     this.readOnly = false;
     this.required = false;
@@ -97,15 +98,11 @@ class InputNumber extends LitElement {
     this.listen("keydown", this.keyDownHandler);
   }
   static {
-    this.properties = { displayedValue: [16, { state: true }], slottedActionElDisabledInternally: [16, { state: true }], alignment: [3, { reflect: true }], autocomplete: [0, { attribute: false }], clearable: [7, { reflect: true, type: Boolean }], disabled: [7, { reflect: true, type: Boolean }], editingEnabled: [7, { reflect: true, type: Boolean }], form: [3, { reflect: true }], groupSeparator: [7, { reflect: true, type: Boolean }], icon: [3, { reflect: true, converter: stringOrBoolean }], iconFlipRtl: [7, { reflect: true, type: Boolean }], integer: [5, { type: Boolean }], label: 1, loading: [7, { reflect: true, type: Boolean }], localeFormat: [5, { type: Boolean }], max: [11, { reflect: true, type: Number }], maxLength: [11, { reflect: true, type: Number }], messageOverrides: [0, { attribute: false }], min: [11, { reflect: true, type: Number }], minLength: [11, { reflect: true, type: Number }], name: [3, { reflect: true }], numberButtonType: [3, { reflect: true }], numberingSystem: [3, { reflect: true }], placeholder: 1, prefixText: 1, readOnly: [7, { reflect: true, type: Boolean }], required: [7, { reflect: true, type: Boolean }], scale: [3, { reflect: true }], status: [3, { reflect: true }], step: [3, { reflect: true }], suffixText: 1, validationIcon: [3, { reflect: true, converter: stringOrBoolean }], validationMessage: 1, validity: [0, { attribute: false }], value: 1 };
+    this.properties = { displayedValue: [16, {}, { state: true }], slottedActionElDisabledInternally: [16, {}, { state: true }], alignment: [3, {}, { reflect: true }], autocomplete: [0, {}, { attribute: false }], clearable: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], editingEnabled: [7, {}, { reflect: true, type: Boolean }], form: [3, {}, { reflect: true }], groupSeparator: [7, {}, { reflect: true, type: Boolean }], icon: [3, { converter: stringOrBoolean }, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], integer: [5, {}, { type: Boolean }], label: 1, loading: [7, {}, { reflect: true, type: Boolean }], localeFormat: [5, {}, { type: Boolean }], max: [11, {}, { reflect: true, type: Number }], maxLength: [11, {}, { reflect: true, type: Number }], messageOverrides: [0, {}, { attribute: false }], min: [11, {}, { reflect: true, type: Number }], minLength: [11, {}, { reflect: true, type: Number }], name: [3, {}, { reflect: true }], numberButtonType: [3, {}, { reflect: true }], numberingSystem: [3, {}, { reflect: true }], placeholder: 1, prefixText: 1, readOnly: [7, {}, { reflect: true, type: Boolean }], required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], status: [3, {}, { reflect: true }], step: [3, {}, { reflect: true }], suffixText: 1, validationIcon: [3, { converter: stringOrBoolean }, { reflect: true }], validationMessage: 1, validity: [0, {}, { attribute: false }], value: 1 };
   }
   static {
     this.styles = styles;
   }
-  get isClearable() {
-    return this.clearable && this.value.length > 0;
-  }
-  /** The component's value. */
   get value() {
     return this._value;
   }
@@ -122,13 +119,9 @@ class InputNumber extends LitElement {
       }
     }
   }
-  // #endregion
-  // #region Public Methods
-  /** Selects the text of the component's `value`. */
   async selectText() {
     this.childNumberEl?.select();
   }
-  /** Sets focus on the component. */
   async setFocus() {
     await componentFocusable(this);
     this.childNumberEl?.focus();
@@ -187,8 +180,9 @@ class InputNumber extends LitElement {
     disconnectForm(this);
     this.el.removeEventListener(internalHiddenInputInputEvent, this.onHiddenFormInputInput);
   }
-  // #endregion
-  // #region Private Methods
+  get isClearable() {
+    return this.clearable && this.value.length > 0;
+  }
   handleGlobalAttributesChanged() {
     this.requestUpdate();
   }
@@ -326,6 +320,7 @@ class InputNumber extends LitElement {
       return;
     }
     if (event.key === "ArrowDown") {
+      event.preventDefault();
       this.nudgeNumberValue("down", event);
       return;
     }
@@ -449,20 +444,44 @@ class InputNumber extends LitElement {
     const isValueDeleted = this.previousValue?.length > value.length || this.value?.length > value.length;
     const valueHandleInteger = this.integer ? value.replace(/[e.]/g, "") : value;
     const hasTrailingDecimalSeparator = valueHandleInteger.charAt(valueHandleInteger.length - 1) === ".";
+    const hasLeadingMinusSign = valueHandleInteger.charAt(0) === "-";
+    const hasLeadingZeros = valueHandleInteger.match(/^-?(0+)\d/);
     const sanitizedValue = hasTrailingDecimalSeparator && isValueDeleted ? valueHandleInteger : sanitizeNumberString(valueHandleInteger);
     const newValue = value && !sanitizedValue ? isValidNumber(this.previousValue) ? this.previousValue : "" : sanitizedValue;
     let newLocalizedValue = numberStringFormatter.localize(newValue);
     if (origin !== "connected" && !hasTrailingDecimalSeparator) {
       newLocalizedValue = addLocalizedTrailingDecimalZeros(newLocalizedValue, newValue, numberStringFormatter);
     }
-    this.displayedValue = hasTrailingDecimalSeparator && isValueDeleted ? `${newLocalizedValue}${numberStringFormatter.decimal}` : newLocalizedValue;
+    if (hasTrailingDecimalSeparator && isValueDeleted) {
+      newLocalizedValue = `${newLocalizedValue}${numberStringFormatter.decimal}`;
+    }
+    if (hasLeadingZeros) {
+      newLocalizedValue = `${hasLeadingMinusSign ? newLocalizedValue.charAt(0) : ""}${numberStringFormatter.localize("0").repeat(hasLeadingZeros[1].length)}${hasLeadingMinusSign ? newLocalizedValue.slice(1) : newLocalizedValue}`;
+    }
+    this.displayedValue = newLocalizedValue;
     this.setPreviousNumberValue(previousValue ?? this.value);
     this.previousValueOrigin = origin;
     this.userChangedValue = origin === "user" && this.value !== newValue;
-    this.value = ["-", "."].includes(newValue) ? "" : newValue;
+    const validNewValue = ["-", "."].includes(newValue) ? "" : newValue;
+    this.value = validNewValue;
+    const localizedCharAllowlist = /* @__PURE__ */ new Set([
+      "e",
+      "E",
+      numberStringFormatter.decimal,
+      numberStringFormatter.minusSign,
+      numberStringFormatter.group,
+      ...numberStringFormatter.digits
+    ]);
+    const childInputValue = this.childNumberEl?.value;
+    if (childInputValue) {
+      const sanitizedChildInputValue = Array.from(childInputValue).filter((char) => localizedCharAllowlist.has(char)).join("");
+      if (sanitizedChildInputValue !== childInputValue) {
+        this.setInputNumberValue(sanitizedChildInputValue);
+      }
+    }
     if (origin === "direct") {
       this.setInputNumberValue(newLocalizedValue);
-      this.setPreviousEmittedNumberValue(newLocalizedValue);
+      this.setPreviousEmittedNumberValue(validNewValue);
     }
     if (nativeEvent) {
       const calciteInputNumberInputEvent = this.calciteInputNumberInput.emit();
@@ -482,8 +501,6 @@ class InputNumber extends LitElement {
       console.warn(`The specified value "${value}" cannot be parsed, or is out of range.`);
     }
   }
-  // #endregion
-  // #region Rendering
   render() {
     const dir = getElementDir(this.el);
     const loader = html`<div class=${safeClassMap(CSS.loader)}><calcite-progress .label=${this.messages.loading} type=indeterminate></calcite-progress></div>`;
@@ -502,7 +519,13 @@ class InputNumber extends LitElement {
     const prefixText = html`<div class=${safeClassMap(CSS.prefix)}>${this.prefixText}</div>`;
     const suffixText = html`<div class=${safeClassMap(CSS.suffix)}>${this.suffixText}</div>`;
     const childEl = keyed("localized-input", html`<input aria-errormessage=${IDS.validationMessage} .ariaInvalid=${this.status === "invalid"} .ariaLabel=${getLabelText(this)} autocomplete=${this.autocomplete ?? nothing} .autofocus=${this.el.autofocus} value=${this.defaultValue ?? nothing} .disabled=${this.disabled} enterkeyhint=${this.el.enterKeyHint ?? nothing} inputmode=${this.el.inputMode || "decimal"} maxlength=${this.maxLength ?? nothing} minlength=${this.minLength ?? nothing} name=${nothing} @blur=${this.inputNumberBlurHandler} @focus=${this.inputNumberFocusHandler} @input=${this.inputNumberInputHandler} @keydown=${this.inputNumberKeyDownHandler} @keyup=${this.inputNumberKeyUpHandler} placeholder=${(this.placeholder || "") ?? nothing} .readOnly=${this.readOnly} type=text .value=${live(this.displayedValue ?? "")} ${ref(this.setChildNumberElRef)}>`);
-    return InteractiveContainer({ disabled: this.disabled, children: html`<div class=${safeClassMap({ [CSS.inputWrapper]: true, [CSS_UTILITY.rtl]: dir === "rtl" })} ${ref(this.inputWrapperEl)}>${this.numberButtonType === "horizontal" && !this.readOnly ? numberButtonsHorizontalDown : null}${this.prefixText ? prefixText : null}<div class=${safeClassMap(CSS.wrapper)}>${childEl}${this.isClearable ? inputClearButton : null}${this.requestedIcon ? iconEl : null}${this.loading ? loader : null}</div><div class=${safeClassMap(CSS.actionWrapper)} ${ref(this.actionWrapperEl)}><slot name=${SLOTS.action}></slot></div>${this.numberButtonType === "vertical" && !this.readOnly ? numberButtonsVertical : null}${this.suffixText ? suffixText : null}${this.numberButtonType === "horizontal" && !this.readOnly ? numberButtonsHorizontalUp : null}${HiddenFormInputSlot({ component: this })}</div>${this.validationMessage && this.status === "invalid" ? Validation({ icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status }) : null}` });
+    return InteractiveContainer({ disabled: this.disabled, children: html`<div class=${safeClassMap({
+      [CSS.inputWrapper]: true,
+      [CSS_UTILITY.rtl]: dir === "rtl",
+      [CSS.hasSuffix]: this.suffixText,
+      [CSS.hasPrefix]: this.prefixText,
+      [CSS.clearable]: this.isClearable
+    })} ${ref(this.inputWrapperEl)}>${this.numberButtonType === "horizontal" && !this.readOnly ? numberButtonsHorizontalDown : null}${this.prefixText ? prefixText : null}<div class=${safeClassMap(CSS.wrapper)}>${childEl}${this.isClearable ? inputClearButton : null}${this.requestedIcon ? iconEl : null}${this.loading ? loader : null}</div><div class=${safeClassMap(CSS.actionWrapper)} ${ref(this.actionWrapperEl)}><slot name=${SLOTS.action}></slot></div>${this.numberButtonType === "vertical" && !this.readOnly ? numberButtonsVertical : null}${this.suffixText ? suffixText : null}${this.numberButtonType === "horizontal" && !this.readOnly ? numberButtonsHorizontalUp : null}${HiddenFormInputSlot({ component: this })}</div>${this.validationMessage && this.status === "invalid" ? Validation({ icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status }) : null}` });
   }
 }
 customElement("calcite-input-number", InputNumber);

package/dist/components/calcite-input-number/resources.d.ts

@@ -1,6 +1,7 @@
 export declare const CSS: {
     loader: string;
     clearButton: string;
+    clearable: string;
     editingEnabled: string;
     inlineChild: string;
     inputIcon: string;
@@ -13,6 +14,8 @@ export declare const CSS: {
     actionWrapper: string;
     resizeIconWrapper: string;
     numberButtonItem: string;
+    hasSuffix: string;
+    hasPrefix: string;
 };
 export declare const IDS: {
     validationMessage: string;

package/dist/components/calcite-input-text/customElement.d.ts

@@ -9,9 +9,13 @@ import { TextualInputComponent } from '../calcite-input/common/input';
 import { IconNameOrString } from '../calcite-icon/interfaces';
 import { Label } from '../calcite-label/customElement.js';
 
-/** @slot action - A slot for positioning a button next to the component. */
+/** @slot [action] - A slot for positioning a button next to the component. */
 export declare class InputText extends LitElement {
-    /** Specifies the text alignment of the component's value. */
+    /**
+     * Specifies the text alignment of the component's value.
+     *
+     * @default "start"
+     */
     alignment: Extract<"start" | "end", Alignment>;
     /**
      * Specifies the type of content to autocomplete, for use in forms.
@@ -20,12 +24,17 @@ export declare class InputText extends LitElement {
      * @mdn [autocomplete](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)
      */
     autocomplete: AutoFill;
-    /** 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.
+     *
+     * @default false
+     */
     clearable: boolean;
     /**
      * 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)
+     * @default false
      */
     disabled: boolean;
     /**
@@ -40,11 +49,19 @@ export declare class InputText extends LitElement {
      * @futureBreaking Remove boolean type as it is not supported.
      */
     icon: IconNameOrString | boolean;
-    /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
+    /**
+     * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
+     *
+     * @default false
+     */
     iconFlipRtl: boolean;
     /** Accessible name for the component's button or hyperlink. */
     label: string;
-    /** 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.
+     *
+     * @default false
+     */
     loading: boolean;
     /**
      * When the component resides in a form,
@@ -55,18 +72,6 @@ export declare class InputText extends LitElement {
     maxLength: number;
     /** Use this property to override individual strings used by the component. */
     messageOverrides?: typeof this.messages._overrides;
-    /**
-     * Made into a prop for testing purposes only
-     *
-     * @private
-     */
-    private messages: Partial<{
-        clear: string;
-        loading: string;
-    }> & import('@arcgis/components-controllers').T9nMeta<{
-        clear: string;
-        loading: string;
-    }>;
     /**
      * When the component resides in a form,
      * specifies the minimum length of text for the component's value.
@@ -102,16 +107,27 @@ export declare class InputText extends LitElement {
      * 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)
+     * @default false
      */
     readOnly: boolean;
     /**
      * When `true` and the component resides in a form,
      * the component must have a value in order for the form to submit.
+     *
+     * @default false
      */
     required: boolean;
-    /** Specifies the size of the component. */
+    /**
+     * Specifies the size of the component.
+     *
+     * @default "m"
+     */
     scale: Scale;
-    /** Specifies the status of the input field, which determines message and icons. */
+    /**
+     * Specifies the status of the input field, which determines message and icons.
+     *
+     * @default "idle"
+     */
     status: Status;
     /** Adds text to the end of the component. */
     suffixText: string;
@@ -122,7 +138,6 @@ export declare class InputText extends LitElement {
     /**
      * The current validation state of the component.
      *
-     * @readonly
      * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)
      */
     readonly validity: MutableValidityState;
@@ -134,7 +149,14 @@ export declare class InputText extends LitElement {
     /** Sets focus on the component. */
     setFocus(): Promise<void>;
     /** Fires each time a new value is typed and committed. */
-    readonly calciteInputTextChange: TargetedEvent<this, undefined>;
+    readonly calciteInputTextChange: TargetedEvent<this, void>;
     /** Fires each time a new value is typed. */
-    readonly calciteInputTextInput: TargetedEvent<this, undefined>;
+    readonly calciteInputTextInput: TargetedEvent<this, void>;
+    private messages: Partial<{
+        clear: string;
+        loading: string;
+    }> & import('@arcgis/lumina/controllers').T9nMeta<{
+        clear: string;
+        loading: string;
+    }>;
 }