feat: add reset functionality to input

components/input/apiExamples/resetState.html

@@ -0,0 +1,7 @@
+<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>

components/input/apiExamples/resetState.js

@@ -0,0 +1,7 @@
+export function resetStateExample() {
+  const elem = document.querySelector('#resetStateExample');
+
+  document.querySelector('#resetStateBtn').addEventListener('click', () => {
+    elem.reset();
+  });
+}

components/input/apiExamples/value.html

@@ -1,5 +1,5 @@
 <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>

components/input/apiExamples/value.js

@@ -3,11 +3,11 @@ 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;
   });
 }

components/input/demo/api.js

@@ -3,6 +3,7 @@ import { customError } from "../apiExamples/error";
 import { setReadonlyValue } from "../apiExamples/readonly";
 import { swapInputValues } from "../apiExamples/swapValue";
 import { programmaticallySetValue } from "../apiExamples/value";
+import { resetStateExample } from "../apiExamples/resetState";
 import './index.js';
 
 export function initExamples(initCount) {
@@ -14,6 +15,7 @@ export function initExamples(initCount) {
     setReadonlyValue();
     swapInputValues();
     programmaticallySetValue();
+    resetStateExample();
   } catch (error) {
     if (initCount <= 20) {
       // setTimeout handles issue where content is sometimes loaded after the functions get called

components/input/docs/api.md

@@ -56,6 +56,7 @@ Generate unique names for dependency components.
 | Method       | Type          | Description                              |
 |--------------|---------------|------------------------------------------|
 | `isDateType` | `(): boolean` |                                          |
+| `reset`      | `(): void`    | Resets component to initial state.       |
 | `validate`   | `(): void`    | Public method force validation of input. |
 
 ## Events

components/input/docs/partials/api.md

@@ -604,6 +604,26 @@ 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) -->
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/resetState.html) -->
+<!-- AURO-GENERATED-CONTENT:END -->
+
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/resetState.js) -->
+<!-- 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.

components/input/src/base-input.js

@@ -159,10 +159,7 @@ export default class BaseInput extends LitElement {
       name:                    { type: String },
       type:                    { type: String,
         reflect: true },
-      value:                   {
-        type: String,
-        reflect: true
-      },
+      value:                   { type: String },
       lang:                    { type: String },
       pattern:                 {
         type: String,
@@ -691,6 +688,13 @@ export default class BaseInput extends LitElement {
     this.validation.validate(this);
   }
 
+  /**
+   * Resets component to initial state.
+   * @returns {void}
+   */
+  reset() {
+    this.validation.reset(this);
+  }
 
   /**
    * Sets configuration data used elsewhere based on the `type` attribute.

components/input/test/auro-input.test.js

@@ -2,7 +2,6 @@ import { fixture, html, expect, elementUpdated, oneEvent } from '@open-wc/testin
 import '../src/index.js';
 
 describe('auro-input', () => {
-
   it('web component is successfully created in the document', async () => {
     // This test fails when attributes are put onto the component before it is attached to the DOM
     const el = document.createElement('auro-input');
@@ -510,7 +509,7 @@ describe('auro-input', () => {
 
   it('type numeric checked correctly when using the min attribute', async () => {
     const el = await fixture(html`
-      <auro-input type="numeric" min="10"></auro-input>
+      <auro-input type="number" min="10"></auro-input>
     `)
 
     el.value = '10';
@@ -528,7 +527,7 @@ describe('auro-input', () => {
 
   it('type numeric checked correctly when using the min attribute', async () => {
     const el = await fixture(html`
-      <auro-input type="numeric" max="10"></auro-input>
+      <auro-input type="number" max="10"></auro-input>
     `)
 
     el.value = '10';
@@ -578,6 +577,21 @@ describe('auro-input', () => {
     expect(el.shadowRoot.querySelector('#checkSpellCheck')).to.not.have.attribute('autocapitalize');
   });
 
+  it('reset method clears the value and validity state', async () => {
+    const el = await fixture(html`
+      <auro-input required minlength="12" value="Auro Team"></auro-input>
+    `);
+
+    expect(el.getAttribute('validity')).to.be.equal('tooShort');
+
+    el.reset();
+
+    await elementUpdated(el);
+
+    expect(el.hasAttribute('validity')).to.be.false;
+    expect(el.value).to.equal(undefined);
+  });
+
   describe('handles date formatting', () => {
     it('MM/DD/YYYY', async () => {
       const el = await fixture(html`