@aurodesignsystem/auro-formkit 1.6.0-beta.8 → 2.0.0-beta.1

package/components/input/demo/api.md

@@ -31,52 +31,50 @@ Generate unique names for dependency components.
 
 ## Properties
 
-| Property                          | Attribute                         | Type      | Default                    | Description                                      |
-|-----------------------------------|-----------------------------------|-----------|----------------------------|--------------------------------------------------|
-| [activeLabel](#activeLabel)                     | `activeLabel`                     | `Boolean` | false                      | If set, the label will remain fixed in the active position. |
-| [autocapitalize](#autocapitalize)                  | `autocapitalize`                  | `String`  |                            | An enumerated attribute that controls whether and how text input is automatically capitalized as it is entered/edited by the user. [off/none, on/sentences, words, characters] |
-| [autocomplete](#autocomplete)                    | `autocomplete`                    | `String`  |                            | An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete="off"` is supported. |
-| [autocorrect](#autocorrect)                     | `autocorrect`                     | `String`  |                            | When set to `off`, stops iOS from auto correcting words when typed into a text box. |
-| [customValidityTypeEmail](#customValidityTypeEmail)         | `customValidityTypeEmail`         | `string`  |                            |                                                  |
-| [disabled](#disabled)                        | `disabled`                        | `Boolean` | false                      | If set, disables the input.                      |
-| [error](#error)                           | `error`                           | `String`  |                            | When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value. |
-| [errorMessage](#errorMessage)                    | `errorMessage`                    | `String`  |                            | Contains the help text message for the current validity error. |
-| [helpText](#helpText)                        | `helpText`                        | `String`  |                            | Deprecated, see `slot`.                          |
-| [icon](#icon)                            | `icon`                            | `Boolean` | false                      | If set, will render an icon inside the input to the left of the value. Support is limited to auro-input instances with credit card format. |
-| [id](#id)                              | `id`                              | `String`  |                            | Sets the unique ID of the element.               |
-| [isValid](#isValid)                         | `isValid`                         | `String`  | false                      | (DEPRECATED - Please use validity) Can be accessed to determine if the input validity. Returns true when validity has not yet been checked or validity = 'valid', all other cases return false. Not intended to be set by the consumer. |
-| [label](#label)                           | `label`                           | `String`  | "Input label is undefined" | Deprecated, see `slot`.                          |
-| [lang](#lang)                            | `lang`                            | `String`  |                            | defines the language of an element.              |
-| [max](#max)                             | `max`                             | `String`  | "undefined"                | The maximum value allowed. This only applies for inputs with a type of `numeric` and all date formats. |
-| [maxLength](#maxLength)                       | `maxLength`                       | `Number`  | "undefined"                | The maximum number of characters the user can enter into the text input. This must be an integer value `0` or higher. |
-| [min](#min)                             | `min`                             | `String`  | "undefined"                | The minimum value allowed. This only applies for inputs with a type of `numeric` and all date formats. |
-| [minLength](#minLength)                       | `minLength`                       | `Number`  | "undefined"                | The minimum number of characters the user can enter into the text input. This must be an non-negative integer value smaller than or equal to the value specified by `maxlength`. |
-| [name](#name)                            | `name`                            | `String`  |                            | Populates the `name` attribute on the input.     |
-| [noValidate](#noValidate)                      | `noValidate`                      | `Boolean` | false                      | If set, disables auto-validation on blur.        |
-| [pattern](#pattern)                         | `pattern`                         | `String`  |                            | Specifies a regular expression the form control's value should match. |
-| [placeholder](#placeholder)                     | `placeholder`                     | `String`  |                            | Define custom placeholder text, only supported by date input formats. |
-| [readonly](#readonly)                        | `readonly`                        | `Boolean` |                            | Makes the input read-only, but can be set programmatically. |
-| [required](#required)                        | `required`                        | `Boolean` | false                      | Populates the `required` attribute on the input. Used for client-side validation. |
-| [setCustomValidity](#setCustomValidity)               | `setCustomValidity`               | `String`  |                            | Sets a custom help text message to display for all validityStates. |
-| [setCustomValidityBadInput](#setCustomValidityBadInput)       | `setCustomValidityBadInput`       | `String`  |                            | Custom help text message to display when validity = `badInput`. |
-| [setCustomValidityCustomError](#setCustomValidityCustomError)    | `setCustomValidityCustomError`    | `String`  |                            | Custom help text message to display when validity = `customError`. |
-| [setCustomValidityForType](#setCustomValidityForType)        | `setCustomValidityForType`        | `String`  | "undefined"                | Custom help text message to display for the declared element `type` and type validity fails. |
-| [setCustomValidityRangeOverflow](#setCustomValidityRangeOverflow)  | `setCustomValidityRangeOverflow`  | `String`  |                            | Custom help text message to display when validity = `rangeOverflow`. |
-| [setCustomValidityRangeUnderflow](#setCustomValidityRangeUnderflow) | `setCustomValidityRangeUnderflow` | `String`  |                            | Custom help text message to display when validity = `rangeUnderflow`. |
-| [setCustomValidityTooLong](#setCustomValidityTooLong)        | `setCustomValidityTooLong`        | `String`  |                            | Custom help text message to display when validity = `tooLong`. |
-| [setCustomValidityTooShort](#setCustomValidityTooShort)       | `setCustomValidityTooShort`       | `String`  |                            | Custom help text message to display when validity = `tooShort`. |
-| [setCustomValidityValueMissing](#setCustomValidityValueMissing)   | `setCustomValidityValueMissing`   | `String`  |                            | Custom help text message to display when validity = `valueMissing`. |
-| [spellcheck](#spellcheck)                      | `spellcheck`                      | `String`  |                            | An enumerated attribute defines whether the element may be checked for spelling errors. [true, false]. When set to `false` the attribute `autocorrect` is set to `off` and `autocapitalize` is set to `none`. |
-| [type](#type)                            | `type`                            | `String`  |                            | Populates the `type` attribute on the input. Allowed values are `password`, `email`, `credit-card`, `month-day-year`, `month-year`, `year-month-day`  or `text`. If given value is not allowed or set, defaults to `text`. |
-| [validateOnInput](#validateOnInput)                 | `validateOnInput`                 | `Boolean` |                            | Sets validation mode to re-eval with each input. |
-| [validity](#validity)                        | `validity`                        | `String`  |                            | Specifies the `validityState` this element is in. |
-| [value](#value)                           | `value`                           | `String`  |                            | Populates the `value` attribute on the input. Can also be read to retrieve the current value of the input. |
+| Property                          | Attribute                         | Type      | Default     | Description                                      |
+|-----------------------------------|-----------------------------------|-----------|-------------|--------------------------------------------------|
+| [activeLabel](#activeLabel)                     | `activeLabel`                     | `Boolean` | false       | If set, the label will remain fixed in the active position. |
+| [autocapitalize](#autocapitalize)                  | `autocapitalize`                  | `String`  |             | An enumerated attribute that controls whether and how text input is automatically capitalized as it is entered/edited by the user. [off/none, on/sentences, words, characters] |
+| [autocomplete](#autocomplete)                    | `autocomplete`                    | `String`  |             | An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete="off"` is supported. |
+| [autocorrect](#autocorrect)                     | `autocorrect`                     | `String`  |             | When set to `off`, stops iOS from auto correcting words when typed into a text box. |
+| [customValidityTypeEmail](#customValidityTypeEmail)         | `customValidityTypeEmail`         | `string`  |             |                                                  |
+| [disabled](#disabled)                        | `disabled`                        | `Boolean` | false       | If set, disables the input.                      |
+| [error](#error)                           | `error`                           | `String`  |             | When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value. |
+| [errorMessage](#errorMessage)                    | `errorMessage`                    | `String`  |             | Contains the help text message for the current validity error. |
+| [icon](#icon)                            | `icon`                            | `Boolean` | false       | If set, will render an icon inside the input to the left of the value. Support is limited to auro-input instances with credit card format. |
+| [id](#id)                              | `id`                              | `String`  |             | Sets the unique ID of the element.               |
+| [lang](#lang)                            | `lang`                            | `String`  |             | defines the language of an element.              |
+| [max](#max)                             | `max`                             | `String`  | "undefined" | The maximum value allowed. This only applies for inputs with a type of `number` and all date formats. |
+| [maxLength](#maxLength)                       | `maxLength`                       | `Number`  | "undefined" | The maximum number of characters the user can enter into the text input. This must be an integer value `0` or higher. |
+| [min](#min)                             | `min`                             | `String`  | "undefined" | The minimum value allowed. This only applies for inputs with a type of `number` and all date formats. |
+| [minLength](#minLength)                       | `minLength`                       | `Number`  | "undefined" | The minimum number of characters the user can enter into the text input. This must be an non-negative integer value smaller than or equal to the value specified by `maxlength`. |
+| [name](#name)                            | `name`                            | `String`  |             | Populates the `name` attribute on the input.     |
+| [noValidate](#noValidate)                      | `noValidate`                      | `Boolean` | false       | If set, disables auto-validation on blur.        |
+| [pattern](#pattern)                         | `pattern`                         | `String`  |             | Specifies a regular expression the form control's value should match. |
+| [placeholder](#placeholder)                     | `placeholder`                     | `String`  |             | Define custom placeholder text, only supported by date input formats. |
+| [readonly](#readonly)                        | `readonly`                        | `Boolean` |             | Makes the input read-only, but can be set programmatically. |
+| [required](#required)                        | `required`                        | `Boolean` | false       | Populates the `required` attribute on the input. Used for client-side validation. |
+| [setCustomValidity](#setCustomValidity)               | `setCustomValidity`               | `String`  |             | Sets a custom help text message to display for all validityStates. |
+| [setCustomValidityBadInput](#setCustomValidityBadInput)       | `setCustomValidityBadInput`       | `String`  |             | Custom help text message to display when validity = `badInput`. |
+| [setCustomValidityCustomError](#setCustomValidityCustomError)    | `setCustomValidityCustomError`    | `String`  |             | Custom help text message to display when validity = `customError`. |
+| [setCustomValidityForType](#setCustomValidityForType)        | `setCustomValidityForType`        | `String`  | "undefined" | Custom help text message to display for the declared element `type` and type validity fails. |
+| [setCustomValidityRangeOverflow](#setCustomValidityRangeOverflow)  | `setCustomValidityRangeOverflow`  | `String`  |             | Custom help text message to display when validity = `rangeOverflow`. |
+| [setCustomValidityRangeUnderflow](#setCustomValidityRangeUnderflow) | `setCustomValidityRangeUnderflow` | `String`  |             | Custom help text message to display when validity = `rangeUnderflow`. |
+| [setCustomValidityTooLong](#setCustomValidityTooLong)        | `setCustomValidityTooLong`        | `String`  |             | Custom help text message to display when validity = `tooLong`. |
+| [setCustomValidityTooShort](#setCustomValidityTooShort)       | `setCustomValidityTooShort`       | `String`  |             | Custom help text message to display when validity = `tooShort`. |
+| [setCustomValidityValueMissing](#setCustomValidityValueMissing)   | `setCustomValidityValueMissing`   | `String`  |             | Custom help text message to display when validity = `valueMissing`. |
+| [spellcheck](#spellcheck)                      | `spellcheck`                      | `String`  |             | An enumerated attribute defines whether the element may be checked for spelling errors. [true, false]. When set to `false` the attribute `autocorrect` is set to `off` and `autocapitalize` is set to `none`. |
+| [type](#type)                            | `type`                            | `String`  |             | Populates the `type` attribute on the input. Allowed values are `password`, `email`, `credit-card`, `month-day-year`, `month-year`, `year-month-day`  or `text`. If given value is not allowed or set, defaults to `text`. |
+| [validateOnInput](#validateOnInput)                 | `validateOnInput`                 | `Boolean` |             | Sets validation mode to re-eval with each input. |
+| [validity](#validity)                        | `validity`                        | `String`  |             | Specifies the `validityState` this element is in. |
+| [value](#value)                           | `value`                           | `String`  |             | Populates the `value` attribute on the input. Can also be read to retrieve the current value of the input. |
 
 ## Methods
 
 | Method       | Type          | Description                              |
 |--------------|---------------|------------------------------------------|
 | [isDateType](#isDateType) | `(): boolean` |                                          |
+| [reset](#reset)      | `(): void`    | Resets component to initial state.       |
 | [validate](#validate)   | `(): void`    | Public method force validation of input. |
 
 ## Events
@@ -238,7 +236,7 @@ Note: Setting the `value` to `undefined` will also reset the element.
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/value.html) -->
   <!-- The below content is automatically added from ../apiExamples/value.html -->
   <auro-button id="setValidValueBtn">Set Value to Alaska</auro-button>
-  <auro-button id="resetValueBtn">Reset</auro-button>
+  <auro-button id="setUndefinedValueBtn">Set Value to Undefined</auro-button>
   <auro-input id="setProgrammaticValueExample" value="Press one of the buttons above!" bordered>
     <span slot="label">Name</span>
     <span slot="helptext">Please enter your full name.</span>
@@ -252,7 +250,7 @@ Note: Setting the `value` to `undefined` will also reset the element.
 
 ```html
 <auro-button id="setValidValueBtn">Set Value to Alaska</auro-button>
-<auro-button id="resetValueBtn">Reset</auro-button>
+<auro-button id="setUndefinedValueBtn">Set Value to Undefined</auro-button>
 <auro-input id="setProgrammaticValueExample" value="Press one of the buttons above!" bordered>
   <span slot="label">Name</span>
   <span slot="helptext">Please enter your full name.</span>
@@ -268,12 +266,12 @@ export function programmaticallySetValue() {
 
   // set value of auro-input element
   document.querySelector('#setValidValueBtn').addEventListener('click', () => {
-      elem.value = "Alaska Airlines is the best";
+    elem.value = "Alaska Airlines is the best";
   });
 
   // reset the value of auro-input element
-  document.querySelector('#resetValueBtn').addEventListener('click', () => {
-      elem.value = '';
+  document.querySelector('#setUndefinedValueBtn').addEventListener('click', () => {
+    elem.value = undefined;
   });
 }
 ```
@@ -281,9 +279,9 @@ export function programmaticallySetValue() {
 </auro-accordion>
 
 ### Max <a name="max"></a>
-Use the `max` attribute to define a maximum value used during validation. The attribute will only apply when `<auro-input>` also has a `type` attribute for `numeric` or any date format.
+Use the `max` attribute to define a maximum value used during validation. The attribute will only apply when `<auro-input>` also has a `type` attribute for `number` or any date format.
 
-The `max` attribute should be used in combination with the `setCustomValidityRangeOverflow` attribute to define help text used when the `max` attribute validation fails.
+The `setCustomValidityRangeOverflow` attribute may optionally be used in combination with the `max` attribute to define custom help text used when the input value is greater than the value of the `max` attribute.
 
 #### Date Example
 
@@ -308,11 +306,11 @@ The `max` attribute should be used in combination with the `setCustomValidityRan
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-#### Numeric Example
+#### Number Example
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/maxNumeric.html) -->
-  <!-- The below content is automatically added from ../apiExamples/maxNumeric.html -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/maxNumber.html) -->
+  <!-- The below content is automatically added from ../apiExamples/maxNumber.html -->
   <auro-input type="number" max="10" setCustomValidityRangeOverflow="The selected value is above the defined maximum.">
     <span slot="label">Choose a number</span>
   </auro-input>
@@ -320,8 +318,8 @@ The `max` attribute should be used in combination with the `setCustomValidityRan
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/maxNumeric.html) -->
-<!-- The below code snippet is automatically added from ../apiExamples/maxNumeric.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/maxNumber.html) -->
+<!-- The below code snippet is automatically added from ../apiExamples/maxNumber.html -->
 
 ```html
 <auro-input type="number" max="10" setCustomValidityRangeOverflow="The selected value is above the defined maximum.">
@@ -331,10 +329,46 @@ The `max` attribute should be used in combination with the `setCustomValidityRan
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
+#### Max Length <a name="maxLength"></a>
+Use the `maxlength` attribute to control the length of the input entered.
+
+The `setCustomValidityTooLong` attribute may optionally be used in combination with the `maxLength` attribute to define custom help text used when the length of the input is too long.
+
+<div class="exampleWrapper exampleWrapper--flex">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/maxLength.html) -->
+  <!-- The below content is automatically added from ../apiExamples/maxLength.html -->
+  <auro-input required maxlength="12" setCustomValidityTooLong="Oops! There were too many characters entered.">
+    <slot slot="label">Voucher Code</slot>
+    <slot slot="helptext">Please enter your 12 character voucher code.</slot>
+  </auro-input>
+  <auro-input bordered required maxlength="12" setCustomValidityTooLong="Oops! There were too many characters entered.">
+    <slot slot="label">Voucher Code</slot>
+    <slot slot="helptext">Please enter your 12 character voucher code.</slot>
+  </auro-input>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/maxLength.html) -->
+<!-- The below code snippet is automatically added from ../apiExamples/maxLength.html -->
+
+```html
+<auro-input required maxlength="12" setCustomValidityTooLong="Oops! There were too many characters entered.">
+  <slot slot="label">Voucher Code</slot>
+  <slot slot="helptext">Please enter your 12 character voucher code.</slot>
+</auro-input>
+<auro-input bordered required maxlength="12" setCustomValidityTooLong="Oops! There were too many characters entered.">
+  <slot slot="label">Voucher Code</slot>
+  <slot slot="helptext">Please enter your 12 character voucher code.</slot>
+</auro-input>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
 ### Min <a name="min"></a>
-Use the `min` attribute to define a minimum value used during validation. The attribute will only apply when `<auro-input>` also has a `type` attribute for numeric or any date format.
+Use the `min` attribute to define a minimum value used during validation. The attribute will only apply when `<auro-input>` also has a `type` attribute for `number` or any date format.
 
-The `min` attribute should be used in combination with the `setCustomValidityRangeUnderflow` attribute to define help text used when the `min` attribute validation fails.
+The `setCustomValidityRangeUnderflow` attribute may optionally be used in combination with the `min` attribute to define custom help text used when the input value is less than the value of the `min` attribute.
 
 #### Date Example
 
@@ -359,11 +393,11 @@ The `min` attribute should be used in combination with the `setCustomValidityRan
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-#### Numeric Example
+#### Number Example
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/minNumeric.html) -->
-  <!-- The below content is automatically added from ../apiExamples/minNumeric.html -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/minNumber.html) -->
+  <!-- The below content is automatically added from ../apiExamples/minNumber.html -->
   <auro-input type="number" min="10" setCustomValidityRangeUnderflow="The selected value is below the defined minimum.">
     <span slot="label">Choose a number</span>
   </auro-input>
@@ -371,8 +405,8 @@ The `min` attribute should be used in combination with the `setCustomValidityRan
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/minNumeric.html) -->
-<!-- The below code snippet is automatically added from ../apiExamples/minNumeric.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/minNumber.html) -->
+<!-- The below code snippet is automatically added from ../apiExamples/minNumber.html -->
 
 ```html
 <auro-input type="number" min="10" setCustomValidityRangeUnderflow="The selected value is below the defined minimum.">
@@ -382,6 +416,42 @@ The `min` attribute should be used in combination with the `setCustomValidityRan
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
+### Min Length <a name="minLength"></a>
+Use the `minlength` attribute to control the length of the input entered.
+
+The `setCustomValidityTooShort` attribute may optionally be used in combination with the `minLength` attribute to define custom help text used when the length of the input is not long enough.
+
+<div class="exampleWrapper exampleWrapper--flex">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/minLength.html) -->
+  <!-- The below content is automatically added from ../apiExamples/minLength.html -->
+  <auro-input required minlength="4" setCustomValidityTooShort="Please enter a full voucher code.">
+    <slot slot="label">Voucher Code</slot>
+    <slot slot="helptext">Please enter your 4 character voucher code.</slot>
+  </auro-input>
+  <auro-input bordered required minlength="4" setCustomValidityTooShort="Please enter a full voucher code.">
+    <slot slot="label">Voucher Code</slot>
+    <slot slot="helptext">Please enter your 4 character voucher code.</slot>
+  </auro-input>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/minLength.html) -->
+<!-- The below code snippet is automatically added from ../apiExamples/minLength.html -->
+
+```html
+<auro-input required minlength="4" setCustomValidityTooShort="Please enter a full voucher code.">
+  <slot slot="label">Voucher Code</slot>
+  <slot slot="helptext">Please enter your 4 character voucher code.</slot>
+</auro-input>
+<auro-input bordered required minlength="4" setCustomValidityTooShort="Please enter a full voucher code.">
+  <slot slot="label">Voucher Code</slot>
+  <slot slot="helptext">Please enter your 4 character voucher code.</slot>
+</auro-input>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
 ### Pattern <a name="pattern"></a>
 Use the `pattern` attribute to set custom input validation. This example also uses the `spellcheck` attribute set to `false` which in turn sets `autocorrect` to `off` and `autocapitalize` to `none`. Additionally the `maxlength` attribute sets the maximum length of characters that can be entered.
 
@@ -796,16 +866,18 @@ Default help text will be added to the input `type="email"` if custom help text
 
 Use the `type="number"` attribute for a numeric style input and invoke a numeric virtual keyboard on handheld devices.
 
+This `number` input type should only be used for incremental numeric values, meaning values with decimals will be considered invalid. The `number` input type is not appropriate for values that happen to only consist of but aren't strictly speaking a number, such as postal codes in many countries or credit card numbers. See [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number) for more information.
+
 <div class="exampleWrapper exampleWrapper--flex">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/number.html) -->
   <!-- The below content is automatically added from ../apiExamples/number.html -->
   <auro-input required type="number">
-    <slot slot="label">Account number</slot>
-    <slot slot="helptext">Please enter your account number.</slot>
+    <slot slot="label">Number of Passengers</slot>
+    <slot slot="helptext">Please enter the number of passengers.</slot>
   </auro-input>
   <auro-input bordered required type="number">
-    <slot slot="label">Account number</slot>
-    <slot slot="helptext">Please enter your account number.</slot>
+    <slot slot="label">Number of Passengers</slot>
+    <slot slot="helptext">Please enter the number of passengers.</slot>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -816,80 +888,12 @@ Use the `type="number"` attribute for a numeric style input and invoke a numeric
 
 ```html
 <auro-input required type="number">
-  <slot slot="label">Account number</slot>
-  <slot slot="helptext">Please enter your account number.</slot>
+  <slot slot="label">Number of Passengers</slot>
+  <slot slot="helptext">Please enter the number of passengers.</slot>
 </auro-input>
 <auro-input bordered required type="number">
-  <slot slot="label">Account number</slot>
-  <slot slot="helptext">Please enter your account number.</slot>
-</auro-input>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
-#### maxLength <a name="maxLength"></a>
-Use the `type="number"` in combination wit the `maxlength` attribute to control the length of the number entered.
-
-<div class="exampleWrapper exampleWrapper--flex">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/maxLength.html) -->
-  <!-- The below content is automatically added from ../apiExamples/maxLength.html -->
-  <auro-input required type="number" maxlength="12">
-    <slot slot="label">Account number</slot>
-    <slot slot="helptext">Please enter your 12 digit account number.</slot>
-  </auro-input>
-  <auro-input bordered required type="number" maxlength="12">
-    <slot slot="label">Account number</slot>
-    <slot slot="helptext">Please enter your 12 digit account number.</slot>
-  </auro-input>
-  <!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/maxLength.html) -->
-<!-- The below code snippet is automatically added from ../apiExamples/maxLength.html -->
-
-```html
-<auro-input required type="number" maxlength="12">
-  <slot slot="label">Account number</slot>
-  <slot slot="helptext">Please enter your 12 digit account number.</slot>
-</auro-input>
-<auro-input bordered required type="number" maxlength="12">
-  <slot slot="label">Account number</slot>
-  <slot slot="helptext">Please enter your 12 digit account number.</slot>
-</auro-input>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
-#### minLength <a name="minLength"></a>
-Use the `type="number"` in combination wit the `minlength` attribute to control the length of the number entered.
-
-<div class="exampleWrapper exampleWrapper--flex">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/minLength.html) -->
-  <!-- The below content is automatically added from ../apiExamples/minLength.html -->
-  <auro-input required type="number" minlength="1">
-    <slot slot="label">Account number</slot>
-    <slot slot="helptext">Please enter your 12 digit account number.</slot>
-  </auro-input>
-  <auro-input bordered required type="number" minlength="1">
-    <slot slot="label">Account number</slot>
-    <slot slot="helptext">Please enter your 12 digit account number.</slot>
-  </auro-input>
-  <!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/minLength.html) -->
-<!-- The below code snippet is automatically added from ../apiExamples/minLength.html -->
-
-```html
-<auro-input required type="number" minlength="1">
-  <slot slot="label">Account number</slot>
-  <slot slot="helptext">Please enter your 12 digit account number.</slot>
-</auro-input>
-<auro-input bordered required type="number" minlength="1">
-  <slot slot="label">Account number</slot>
-  <slot slot="helptext">Please enter your 12 digit account number.</slot>
+  <slot slot="label">Number of Passengers</slot>
+  <slot slot="helptext">Please enter the number of passengers.</slot>
 </auro-input>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -1146,6 +1150,50 @@ Use the `type="fullYear"` attribute for a date formatted input.
 
 ## Additional Use Cases
 
+### Reset State
+
+Use the `reset()` method to reset the `<auro-input>`'s `value` and `validity` state. Doing so will preserve all other attributes and properties.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/resetState.html) -->
+  <!-- The below content is automatically added from ../apiExamples/resetState.html -->
+  <auro-button id="resetStateBtn">Reset</auro-button>
+  <br /><br />
+  <auro-input id="resetStateExample" bordered minlength="12" value="Auro Team" setCustomValidityTooShort="Please enter your full name!">
+    <slot slot="label">Full Name</slot>
+    <slot slot="helptext">Please enter your full name.</slot>
+  </auro-input>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/resetState.html) -->
+<!-- The below code snippet is automatically added from ../apiExamples/resetState.html -->
+
+```html
+<auro-button id="resetStateBtn">Reset</auro-button>
+<br /><br />
+<auro-input id="resetStateExample" bordered minlength="12" value="Auro Team" setCustomValidityTooShort="Please enter your full name!">
+  <slot slot="label">Full Name</slot>
+  <slot slot="helptext">Please enter your full name.</slot>
+</auro-input>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/resetState.js) -->
+<!-- The below code snippet is automatically added from ../apiExamples/resetState.js -->
+
+```js
+export function resetStateExample() {
+  const elem = document.querySelector('#resetStateExample');
+
+  document.querySelector('#resetStateBtn').addEventListener('click', () => {
+    elem.reset();
+  });
+}
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
 ### Swapping Values Between Inputs
 
 Example illustrates using a JavaScript function attached to an `auro-button` component `click` event to swap the values of two `auro-input` elements. An example of this use case would be swapping the departure and arrival airports in a flight search form.