@aurodesignsystem/auro-formkit 1.6.0-beta.9 → 2.0.0-beta.10

package/components/input/demo/api.md

@@ -1,20 +1,3 @@
-<style>
-  .exampleWrapper--flex * {
-    margin-bottom: 1rem;
-  }
-
-  @media screen and (min-width: 660px) {
-    .exampleWrapper--flex {
-      display: flex;
-      justify-content: space-between;
-    }
-
-    .exampleWrapper--flex * {
-      width: 45%;
-      margin-bottom: unset;
-    }
-  }
-</style>
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=../docs/api.md) -->
 <!-- The below content is automatically added from ../docs/api.md -->
 
@@ -31,52 +14,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`  |             | Custom help text message for email type validity. |
+| [disabled](#disabled)                        | `disabled`                        | `boolean` | false       | If set, disables the input.                      |
+| [error](#error)                           | `error`                           | `string`  |             |                                                  |
+| [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 a 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
@@ -119,10 +100,11 @@ The `auro-input` element supports the localization of all content managed within
 
 ## Basic
 
-<div class="exampleWrapper exampleWrapper--flex">
+The default component supports the basic input `type="text"` structure. The `(optional)` label is provided to instruct the user that their input is not required. Use the `bordered` attribute for a bordered `<auro-input>`.
+
+<div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/basic.html) -->
   <!-- The below content is automatically added from ../apiExamples/basic.html -->
-  <auro-input></auro-input>
   <auro-input bordered></auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -132,7 +114,6 @@ The `auro-input` element supports the localization of all content managed within
 <!-- The below code snippet is automatically added from ../apiExamples/basic.html -->
 
 ```html
-<auro-input></auro-input>
 <auro-input bordered></auro-input>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -143,12 +124,9 @@ The `auro-input` element supports the localization of all content managed within
 ### Disabled <a name="disabled"></a>
 Use the `disable` attribute to prevent the user from interacting with the input.
 
-<div class="exampleWrapper exampleWrapper--flex">
+<div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/disabled.html) -->
   <!-- The below content is automatically added from ../apiExamples/disabled.html -->
-  <auro-input disabled type="month-day-year" required>
-    <slot slot="label">Departure date</slot>
-  </auro-input>
   <auro-input disabled bordered type="month-day-year">
     <slot slot="label">Arrival date</slot>
   </auro-input>
@@ -160,9 +138,6 @@ Use the `disable` attribute to prevent the user from interacting with the input.
 <!-- The below code snippet is automatically added from ../apiExamples/disabled.html -->
 
 ```html
-<auro-input disabled type="month-day-year" required>
-  <slot slot="label">Departure date</slot>
-</auro-input>
 <auro-input disabled bordered type="month-day-year">
   <slot slot="label">Arrival date</slot>
 </auro-input>
@@ -173,13 +148,10 @@ Use the `disable` attribute to prevent the user from interacting with the input.
 ### Placeholder <a name="placeholder"></a>
 Use the `placeholder` attribute to add a custom placeholder message within the element.
 
-<div class="exampleWrapper exampleWrapper--flex">
+<div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/placeholder.html) -->
   <!-- The below content is automatically added from ../apiExamples/placeholder.html -->
-  <auro-input required placeholder="John Doe">
-    <span slot="label">Full name</span>
-  </auro-input>
-  <auro-input required bordered placeholder="John Doe">
+  <auro-input placeholder="John Doe" bordered required>
     <span slot="label">Full name</span>
     <span slot="helptext">Please enter your full name.</span>
   </auro-input>
@@ -191,10 +163,7 @@ Use the `placeholder` attribute to add a custom placeholder message within the e
 <!-- The below code snippet is automatically added from ../apiExamples/placeholder.html -->
 
 ```html
-<auro-input required placeholder="John Doe">
-  <span slot="label">Full name</span>
-</auro-input>
-<auro-input required bordered placeholder="John Doe">
+<auro-input placeholder="John Doe" bordered required>
   <span slot="label">Full name</span>
   <span slot="helptext">Please enter your full name.</span>
 </auro-input>
@@ -238,7 +207,8 @@ 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>
+  <br /><br />
   <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 +222,8 @@ 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>
+<br /><br />
 <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 +239,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,16 +252,16 @@ 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
 
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/maxDate.html) -->
   <!-- The below content is automatically added from ../apiExamples/maxDate.html -->
-  <auro-input type="month-day-year" max="03/25/2023" setCustomValidityRangeOverflow="The selected date is past the defined maximum date.">
+  <auro-input type="month-day-year" max="03/25/2023" setCustomValidityRangeOverflow="The selected date is past the defined maximum date." bordered>
     <span slot="label">Choose a date</span>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
@@ -301,30 +272,30 @@ The `max` attribute should be used in combination with the `setCustomValidityRan
 <!-- The below code snippet is automatically added from ../apiExamples/maxDate.html -->
 
 ```html
-<auro-input type="month-day-year" max="03/25/2023" setCustomValidityRangeOverflow="The selected date is past the defined maximum date.">
+<auro-input type="month-day-year" max="03/25/2023" setCustomValidityRangeOverflow="The selected date is past the defined maximum date." bordered>
   <span slot="label">Choose a date</span>
 </auro-input>
 ```
 <!-- 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-input type="number" max="10" setCustomValidityRangeOverflow="The selected value is above the defined maximum.">
+  <!-- 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." bordered>
     <span slot="label">Choose a number</span>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
 </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.">
+<auro-input type="number" max="10" setCustomValidityRangeOverflow="The selected value is above the defined maximum." bordered>
   <span slot="label">Choose a number</span>
 </auro-input>
 ```
@@ -332,16 +303,16 @@ The `max` attribute should be used in combination with the `setCustomValidityRan
 </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
 
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/minDate.html) -->
   <!-- The below content is automatically added from ../apiExamples/minDate.html -->
-  <auro-input type="month-day-year" min="03/25/2023" setCustomValidityRangeUnderflow="The selected date is before the defined minimum date.">
+  <auro-input type="month-day-year" min="03/25/2023" setCustomValidityRangeUnderflow="The selected date is before the defined minimum date." bordered>
     <span slot="label">Choose a date</span>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
@@ -352,93 +323,115 @@ The `min` attribute should be used in combination with the `setCustomValidityRan
 <!-- The below code snippet is automatically added from ../apiExamples/minDate.html -->
 
 ```html
-<auro-input type="month-day-year" min="03/25/2023" setCustomValidityRangeUnderflow="The selected date is before the defined minimum date.">
+<auro-input type="month-day-year" min="03/25/2023" setCustomValidityRangeUnderflow="The selected date is before the defined minimum date." bordered>
   <span slot="label">Choose a date</span>
 </auro-input>
 ```
 <!-- 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-input type="number" min="10" setCustomValidityRangeUnderflow="The selected value is below the defined minimum.">
+  <!-- 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." bordered>
     <span slot="label">Choose a number</span>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
 </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.">
+<auro-input type="number" min="10" setCustomValidityRangeUnderflow="The selected value is below the defined minimum." bordered>
   <span slot="label">Choose a number</span>
 </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.
+### Max Length <a name="maxLength"></a>
+Use the `maxlength` attribute to control the length of the input entered.
 
-The `<auro-input>` component supports setting a custom validity message specific to the pattern validation by using the `setCustomValidityBadInput` attribute.
+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/pattern.html) -->
-  <!-- The below content is automatically added from ../apiExamples/pattern.html -->
-  <auro-input pattern="[a-z]{1,15}" spellcheck="false" setCustomValidityBadInput="Only contain lowercase letters w/no spaces">
-    <span slot="label">Username</span>
-    <span slot="helptext">Please enter a username.</span>
-  </auro-input>
-  <auro-input bordered pattern="[a-z]{1,15}" spellcheck="false" setCustomValidityBadInput="Only contain lowercase letters w/no spaces">
-    <span slot="label">Username</span>
-    <span slot="helptext">Please enter a username.</span>
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/maxLength.html) -->
+  <!-- The below content is automatically added from ../apiExamples/maxLength.html -->
+  <auro-input maxlength="12" setCustomValidityTooLong="Oops! There were too many characters entered." bordered required>
+    <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/pattern.html) -->
-<!-- The below code snippet is automatically added from ../apiExamples/pattern.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/maxLength.html) -->
+<!-- The below code snippet is automatically added from ../apiExamples/maxLength.html -->
 
 ```html
-<auro-input pattern="[a-z]{1,15}" spellcheck="false" setCustomValidityBadInput="Only contain lowercase letters w/no spaces">
-  <span slot="label">Username</span>
-  <span slot="helptext">Please enter a username.</span>
+<auro-input maxlength="12" setCustomValidityTooLong="Oops! There were too many characters entered." bordered required>
+  <slot slot="label">Voucher Code</slot>
+  <slot slot="helptext">Please enter your 12 character voucher code.</slot>
 </auro-input>
-<auro-input bordered pattern="[a-z]{1,15}" spellcheck="false" setCustomValidityBadInput="Only contain lowercase letters w/no spaces">
-  <span slot="label">Username</span>
-  <span slot="helptext">Please enter a username.</span>
+```
+<!-- 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">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/minLength.html) -->
+  <!-- The below content is automatically added from ../apiExamples/minLength.html -->
+  <auro-input minlength="4" setCustomValidityTooShort="Please enter a full voucher code." bordered required>
+    <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 minlength="4" setCustomValidityTooShort="Please enter a full voucher code." bordered required>
+  <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>
 
-### Borderless <a name="borderless"></a>
-Use the `borderless` attribute to remove the bottom border. This attribute is intended for use when input is wrapped in a container that already handles the different state displays, e.g. [auro-dropdown](http://auro.alaskaair.com/components/auro/dropdown).
+### 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.
+
+The `<auro-input>` component supports setting a custom validity message specific to the pattern validation by using the `setCustomValidityPatternMismatch` attribute.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/borderless.html) -->
-  <!-- The below content is automatically added from ../apiExamples/borderless.html -->
-  <auro-input borderless>
-    <span slot="label">Name</span>
-    <span slot="helptext">Please enter your full name.</span>
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/pattern.html) -->
+  <!-- The below content is automatically added from ../apiExamples/pattern.html -->
+  <auro-input pattern="[a-z]{1,15}" spellcheck="false" setCustomValidityPatternMismatch="Only contain lowercase letters w/no spaces" bordered>
+    <span slot="label">Username</span>
+    <span slot="helptext">Please enter a username.</span>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/borderless.html) -->
-<!-- The below code snippet is automatically added from ../apiExamples/borderless.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/pattern.html) -->
+<!-- The below code snippet is automatically added from ../apiExamples/pattern.html -->
 
 ```html
-<auro-input borderless>
-  <span slot="label">Name</span>
-  <span slot="helptext">Please enter your full name.</span>
+<auro-input pattern="[a-z]{1,15}" spellcheck="false" setCustomValidityPatternMismatch="Only contain lowercase letters w/no spaces" bordered>
+  <span slot="label">Username</span>
+  <span slot="helptext">Please enter a username.</span>
 </auro-input>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -453,7 +446,8 @@ In this example, the user is able to programmatically change the value of the in
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/readonly.html) -->
   <!-- The below content is automatically added from ../apiExamples/readonly.html -->
   <auro-button id="setReadonlyValueBtn">Set Value to Auro Alaska</auro-button>
-  <auro-button id="resetReadonlyValueBtn">Reset</auro-button>
+  <auro-button id="resetReadonlyValueBtn">Reset</auro-button>
+  <br /><br />
   <auro-input readonly bordered id="readonlyExample">
     <span slot="label">Name</span>
     <span slot="helptext">Please enter your full name.</span>
@@ -467,7 +461,8 @@ In this example, the user is able to programmatically change the value of the in
 
 ```html
 <auro-button id="setReadonlyValueBtn">Set Value to Auro Alaska</auro-button>
-<auro-button id="resetReadonlyValueBtn">Reset</auro-button>
+<auro-button id="resetReadonlyValueBtn">Reset</auro-button>
+<br /><br />
 <auro-input readonly bordered id="readonlyExample">
   <span slot="label">Name</span>
   <span slot="helptext">Please enter your full name.</span>
@@ -497,13 +492,9 @@ export function setReadonlyValue() {
 ### Active Label <a name="activeLabel"></a>
 Example use cases for auro-input support the `activeLabel` attribute. If set, the label will stay fixed in the active position.
 
-<div class="exampleWrapper exampleWrapper--flex">
+<div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/activeLabel.html) -->
   <!-- The below content is automatically added from ../apiExamples/activeLabel.html -->
-  <auro-input activeLabel>
-    <slot slot="label">Address</slot>
-    <slot slot="helptext">Please enter your home address.</slot>
-  </auro-input>
   <auro-input activeLabel bordered>
     <slot slot="label">Address</slot>
     <slot slot="helptext">Please enter your home address.</slot>
@@ -516,10 +507,6 @@ Example use cases for auro-input support the `activeLabel` attribute. If set, th
 <!-- The below code snippet is automatically added from ../apiExamples/activeLabel.html -->
 
 ```html
-<auro-input activeLabel>
-  <slot slot="label">Address</slot>
-  <slot slot="helptext">Please enter your home address.</slot>
-</auro-input>
 <auro-input activeLabel bordered>
   <slot slot="label">Address</slot>
   <slot slot="helptext">Please enter your home address.</slot>
@@ -531,13 +518,9 @@ Example use cases for auro-input support the `activeLabel` attribute. If set, th
 ### Disable auto-validation <a name="noValidate"></a>
 For use cases where the field is `required`, but live validation is not wanted, use the `noValidate` attribute.
 
-<div class="exampleWrapper exampleWrapper--flex">
+<div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/noValidate.html) -->
   <!-- The below content is automatically added from ../apiExamples/noValidate.html -->
-  <auro-input noValidate required>
-    <slot slot="label">Address</slot>
-    <slot slot="helptext">Please enter your home address.</slot>
-  </auro-input>
   <auro-input noValidate required bordered>
     <slot slot="label">Address</slot>
     <slot slot="helptext">Please enter your home address.</slot>
@@ -550,10 +533,6 @@ For use cases where the field is `required`, but live validation is not wanted,
 <!-- The below code snippet is automatically added from ../apiExamples/noValidate.html -->
 
 ```html
-<auro-input noValidate required>
-  <slot slot="label">Address</slot>
-  <slot slot="helptext">Please enter your home address.</slot>
-</auro-input>
 <auro-input noValidate required bordered>
   <slot slot="label">Address</slot>
   <slot slot="helptext">Please enter your home address.</slot>
@@ -571,14 +550,11 @@ The `<auro-input>` component follows the HTML5 input `validity` and `validitySta
 ### Required <a name="required"></a>
 When present, the `required` attribute specifies that an input field must be filled out before submitting the form.
 
-When the validity check fails the validityState equals `valueMissing`. The error message for the `valueMissing` validityState can be changed to a custom string using the `setCustomValidityValueMissing`.
+When the validity check fails, the validityState equals `valueMissing`. The error message for the `valueMissing` validityState can be changed to a custom string using the `setCustomValidityValueMissing`.
 
-<div class="exampleWrapper exampleWrapper--flex">
+<div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/required.html) -->
   <!-- The below content is automatically added from ../apiExamples/required.html -->
-  <auro-input required placeholder="John Doe">
-    <span slot="label">Full name</span>
-  </auro-input>
   <auro-input required bordered placeholder="John Doe">
     <span slot="label">Full name</span>
     <span slot="helptext">Please enter your full name.</span>
@@ -591,9 +567,6 @@ When the validity check fails the validityState equals `valueMissing`. The error
 <!-- The below code snippet is automatically added from ../apiExamples/required.html -->
 
 ```html
-<auro-input required placeholder="John Doe">
-  <span slot="label">Full name</span>
-</auro-input>
 <auro-input required bordered placeholder="John Doe">
   <span slot="label">Full name</span>
   <span slot="helptext">Please enter your full name.</span>
@@ -605,14 +578,10 @@ When the validity check fails the validityState equals `valueMissing`. The error
 ### Validation on input <a name="validateOnInput"></a>
 Use the `validateOnInput` attribute to enable live validation on the `input` event. Recommended use is with setting a custom `pattern` and validation is required prior to a `blur` event.
 
-<div class="exampleWrapper exampleWrapper--flex">
+<div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/validateOnInput.html) -->
   <!-- The below content is automatically added from ../apiExamples/validateOnInput.html -->
-  <auro-input validateOnInput required pattern="[a-zA-Z-.']+( +[a-zA-Z-.']+)+" setCustomValidityBadInput="Full name requires two or more names with at least one space.">
-    <span slot="label">Full Name</span>
-    <span slot="helptext">Please enter your full name as it appears on the card.</span>
-  </auro-input>
-  <auro-input validateOnInput bordered required pattern="[a-zA-Z-.']+( +[a-zA-Z-.']+)+" setCustomValidityBadInput="Full name requires two or more names with at least one space.">
+  <auro-input validateOnInput bordered required pattern="[a-zA-Z-.']+( +[a-zA-Z-.']+)+" setCustomValidityPatternMismatch="Full name requires two or more names with at least one space.">
     <span slot="label">Full Name</span>
     <span slot="helptext">Please enter your full name as it appears on the card.</span>
   </auro-input>
@@ -624,11 +593,7 @@ Use the `validateOnInput` attribute to enable live validation on the `input` eve
 <!-- The below code snippet is automatically added from ../apiExamples/validateOnInput.html -->
 
 ```html
-<auro-input validateOnInput required pattern="[a-zA-Z-.']+( +[a-zA-Z-.']+)+" setCustomValidityBadInput="Full name requires two or more names with at least one space.">
-  <span slot="label">Full Name</span>
-  <span slot="helptext">Please enter your full name as it appears on the card.</span>
-</auro-input>
-<auro-input validateOnInput bordered required pattern="[a-zA-Z-.']+( +[a-zA-Z-.']+)+" setCustomValidityBadInput="Full name requires two or more names with at least one space.">
+<auro-input validateOnInput bordered required pattern="[a-zA-Z-.']+( +[a-zA-Z-.']+)+" setCustomValidityPatternMismatch="Full name requires two or more names with at least one space.">
   <span slot="label">Full Name</span>
   <span slot="helptext">Please enter your full name as it appears on the card.</span>
 </auro-input>
@@ -641,13 +606,9 @@ The `setCustomValidity` attribute can be used to set a custom string for all val
 
 **NOTE:** Custom strings are NOT localized. It is the responsibility of the element consumer to provide localized strings when using this element property.
 
-<div class="exampleWrapper exampleWrapper--flex">
+<div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/setCustomValidity.html) -->
   <!-- The below content is automatically added from ../apiExamples/setCustomValidity.html -->
-  <auro-input required minlength="3" setCustomValidity="Sorry, please enter your first and last name (one space required).">
-    <span slot="label">Full Name</span>
-    <span slot="helptext">Please enter your full name.</span>
-  </auro-input>
   <auro-input bordered required minlength="3" setCustomValidity="Sorry, please enter your first and last name (one space required).">
     <span slot="label">Full Name</span>
     <span slot="helptext">Please enter your full name.</span>
@@ -660,10 +621,6 @@ The `setCustomValidity` attribute can be used to set a custom string for all val
 <!-- The below code snippet is automatically added from ../apiExamples/setCustomValidity.html -->
 
 ```html
-<auro-input required minlength="3" setCustomValidity="Sorry, please enter your first and last name (one space required).">
-  <span slot="label">Full Name</span>
-  <span slot="helptext">Please enter your full name.</span>
-</auro-input>
 <auro-input bordered required minlength="3" setCustomValidity="Sorry, please enter your first and last name (one space required).">
   <span slot="label">Full Name</span>
   <span slot="helptext">Please enter your full name.</span>
@@ -675,12 +632,15 @@ The `setCustomValidity` attribute can be used to set a custom string for all val
 ### Error <a name="error"></a>
 Use the `error` attribute to apply a persistent custom error that supersedes the HTML5 validation logic.
 
+A custom error message can be set using the `error` attribute, or it can be used in conjuction with the `setCustomValidityCustomError` attribute.
+
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/error.html) -->
   <!-- The below content is automatically added from ../apiExamples/error.html -->
   <auro-button id="setCustomErrorBtn">Set Custom Error</auro-button>
-  <auro-button id="setCustomErrorClearBtn">Clear Custom Error</auro-button>
-  <auro-input id="setCustomErrorExample" error="Initial error attribute value">
+  <auro-button id="setCustomErrorClearBtn">Clear Custom Error</auro-button>
+  <br /><br />
+  <auro-input id="setCustomErrorExample" error="Initial error attribute value" bordered>
     <span slot="label">Name</span>
     <span slot="helptext">Please enter your full name.</span>
   </auro-input>
@@ -693,8 +653,9 @@ Use the `error` attribute to apply a persistent custom error that supersedes the
 
 ```html
 <auro-button id="setCustomErrorBtn">Set Custom Error</auro-button>
-<auro-button id="setCustomErrorClearBtn">Clear Custom Error</auro-button>
-<auro-input id="setCustomErrorExample" error="Initial error attribute value">
+<auro-button id="setCustomErrorClearBtn">Clear Custom Error</auro-button>
+<br /><br />
+<auro-input id="setCustomErrorExample" error="Initial error attribute value" bordered>
   <span slot="label">Name</span>
   <span slot="helptext">Please enter your full name.</span>
 </auro-input>
@@ -728,12 +689,9 @@ Use the `type="password"` attribute for a password style input. The hide/show pa
 
 Default help text will be added to the input `type="password"` if custom help text is not provided. See the example below.
 
-<div class="exampleWrapper exampleWrapper--flex">
+<div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/password.html) -->
   <!-- The below content is automatically added from ../apiExamples/password.html -->
-  <auro-input type="password" required>
-    <span slot="label">Password</span>
-  </auro-input>
   <auro-input type="password" required bordered>
     <span slot="label">Password</span>
     <span slot="helptext">Please enter a secure password.</span>
@@ -746,9 +704,6 @@ Default help text will be added to the input `type="password"` if custom help te
 <!-- The below code snippet is automatically added from ../apiExamples/password.html -->
 
 ```html
-<auro-input type="password" required>
-  <span slot="label">Password</span>
-</auro-input>
 <auro-input type="password" required bordered>
   <span slot="label">Password</span>
   <span slot="helptext">Please enter a secure password.</span>
@@ -763,13 +718,10 @@ Use the `type="email"` attribute for a email style input. These examples illustr
 
 Default help text will be added to the input `type="email"` if custom help text is not provided. See the example below.
 
-<div class="exampleWrapper exampleWrapper--flex">
+<div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/email.html) -->
   <!-- The below content is automatically added from ../apiExamples/email.html -->
-  <auro-input required type="email">
-    <slot slot="label">Email address</slot>
-  </auro-input>
-  <auro-input bordered required type="email">
+  <auro-input type="email" bordered required>
     <slot slot="label">Email address</slot>
     <slot slot="helptext">Please enter your email address.</slot>
   </auro-input>
@@ -781,10 +733,7 @@ Default help text will be added to the input `type="email"` if custom help text
 <!-- The below code snippet is automatically added from ../apiExamples/email.html -->
 
 ```html
-<auro-input required type="email">
-  <slot slot="label">Email address</slot>
-</auro-input>
-<auro-input bordered required type="email">
+<auro-input type="email" bordered required>
   <slot slot="label">Email address</slot>
   <slot slot="helptext">Please enter your email address.</slot>
 </auro-input>
@@ -796,16 +745,14 @@ 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.
 
-<div class="exampleWrapper exampleWrapper--flex">
+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">
   <!-- 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>
-  </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 type="number" bordered required>
+    <slot slot="label">Number of Passengers</slot>
+    <slot slot="helptext">Please enter the number of passengers.</slot>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -815,81 +762,9 @@ Use the `type="number"` attribute for a numeric style input and invoke a numeric
 <!-- The below code snippet is automatically added from ../apiExamples/number.html -->
 
 ```html
-<auro-input required type="number">
-  <slot slot="label">Account number</slot>
-  <slot slot="helptext">Please enter your account number.</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>
+<auro-input type="number" bordered required>
+  <slot slot="label">Number of Passengers</slot>
+  <slot slot="helptext">Please enter the number of passengers.</slot>
 </auro-input>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -901,13 +776,10 @@ Use the `type="credit-card"` attribute for a credit card formatted input.
 
 Default help text will be added to the input `type="credit-card"` if custom help text is not provided. See the example below.
 
-<div class="exampleWrapper exampleWrapper--flex">
+<div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/creditCard.html) -->
   <!-- The below content is automatically added from ../apiExamples/creditCard.html -->
-  <auro-input required type="credit-card">
-    <slot slot="label">Card number</slot>
-  </auro-input>
-  <auro-input bordered required type="credit-card">
+  <auro-input type="credit-card" bordered required>
     <slot slot="label">Card number</slot>
     <slot slot="helptext">Valid credit card numbers must include 16 digits (15 for Amex).</slot>
   </auro-input>
@@ -919,10 +791,7 @@ Default help text will be added to the input `type="credit-card"` if custom help
 <!-- The below code snippet is automatically added from ../apiExamples/creditCard.html -->
 
 ```html
-<auro-input required type="credit-card">
-  <slot slot="label">Card number</slot>
-</auro-input>
-<auro-input bordered required type="credit-card">
+<auro-input type="credit-card" bordered required>
   <slot slot="label">Card number</slot>
   <slot slot="helptext">Valid credit card numbers must include 16 digits (15 for Amex).</slot>
 </auro-input>
@@ -933,13 +802,10 @@ Use the `type="credit-card"` and `icon` attributes for a credit card formatted i
 
 **Dependency**: Please be sure to also install [auro-icon](https://auro.alaskaair.com/components/auro/icon/install) as a peer dependency.
 
-<div class="exampleWrapper exampleWrapper--flex">
+<div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/creditCardIcon.html) -->
   <!-- The below content is automatically added from ../apiExamples/creditCardIcon.html -->
-  <auro-input required icon type="credit-card">
-    <slot slot="label">Card number</slot>
-  </auro-input>
-  <auro-input bordered required icon type="credit-card">
+  <auro-input icon type="credit-card" bordered required>
     <slot slot="label">Card number</slot>
     <slot slot="helptext">Valid credit card numbers must include 16 digits (15 for Amex).</slot>
   </auro-input>
@@ -952,10 +818,7 @@ Use the `type="credit-card"` and `icon` attributes for a credit card formatted i
 <!-- The below code snippet is automatically added from ../apiExamples/creditCardIcon.html -->
 
 ```html
-<auro-input required icon type="credit-card">
-  <slot slot="label">Card number</slot>
-</auro-input>
-<auro-input bordered required icon type="credit-card">
+<auro-input icon type="credit-card" bordered required>
   <slot slot="label">Card number</slot>
   <slot slot="helptext">Valid credit card numbers must include 16 digits (15 for Amex).</slot>
 </auro-input>
@@ -967,13 +830,10 @@ Use the `type="credit-card"` and `icon` attributes for a credit card formatted i
 
 Use the `type="month-day-year"` attribute for a date formatted input.
 
-<div class="exampleWrapper exampleWrapper--flex">
+<div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/monthDayYear.html) -->
   <!-- The below content is automatically added from ../apiExamples/monthDayYear.html -->
-  <auro-input type="month-day-year" required>
-    <slot slot="label">Departure date</slot>
-  </auro-input>
-  <auro-input bordered type="month-day-year">
+  <auro-input type="month-day-year" bordered>
     <slot slot="label">Arrival date</slot>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
@@ -984,10 +844,7 @@ Use the `type="month-day-year"` attribute for a date formatted input.
 <!-- The below code snippet is automatically added from ../apiExamples/monthDayYear.html -->
 
 ```html
-<auro-input type="month-day-year" required>
-  <slot slot="label">Departure date</slot>
-</auro-input>
-<auro-input bordered type="month-day-year">
+<auro-input type="month-day-year" bordered>
   <slot slot="label">Arrival date</slot>
 </auro-input>
 ```
@@ -995,13 +852,10 @@ Use the `type="month-day-year"` attribute for a date formatted input.
 </auro-accordion>
 Use the `type="month-year"` attribute for a date formatted input.
 
-<div class="exampleWrapper exampleWrapper--flex">
+<div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/monthYear.html) -->
   <!-- The below content is automatically added from ../apiExamples/monthYear.html -->
-  <auro-input type="month-year">
-    <slot slot="label">Departure date</slot>
-  </auro-input>
-  <auro-input bordered type="month-year" required>
+  <auro-input type="month-year" bordered>
     <slot slot="label">Arrival date</slot>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
@@ -1012,10 +866,7 @@ Use the `type="month-year"` attribute for a date formatted input.
 <!-- The below code snippet is automatically added from ../apiExamples/monthYear.html -->
 
 ```html
-<auro-input type="month-year">
-  <slot slot="label">Departure date</slot>
-</auro-input>
-<auro-input bordered type="month-year" required>
+<auro-input type="month-year" bordered>
   <slot slot="label">Arrival date</slot>
 </auro-input>
 ```
@@ -1023,13 +874,10 @@ Use the `type="month-year"` attribute for a date formatted input.
 </auro-accordion>
 Use the `type="month-fullYear"` attribute for a date formatted input.
 
-<div class="exampleWrapper exampleWrapper--flex">
+<div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/monthFullYear.html) -->
   <!-- The below content is automatically added from ../apiExamples/monthFullYear.html -->
-  <auro-input type="month-fullYear">
-    <slot slot="label">Departure date</slot>
-  </auro-input>
-  <auro-input bordered type="month-fullYear" required>
+  <auro-input type="month-fullYear" bordered>
     <slot slot="label">Arrival date</slot>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
@@ -1040,10 +888,7 @@ Use the `type="month-fullYear"` attribute for a date formatted input.
 <!-- The below code snippet is automatically added from ../apiExamples/monthFullYear.html -->
 
 ```html
-<auro-input type="month-fullYear">
-  <slot slot="label">Departure date</slot>
-</auro-input>
-<auro-input bordered type="month-fullYear" required>
+<auro-input type="month-fullYear" bordered>
   <slot slot="label">Arrival date</slot>
 </auro-input>
 ```
@@ -1051,13 +896,10 @@ Use the `type="month-fullYear"` attribute for a date formatted input.
 </auro-accordion>
 Use the `type="year-month-day"` attribute for a date formatted input.
 
-<div class="exampleWrapper exampleWrapper--flex">
+<div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/yearMonthDay.html) -->
   <!-- The below content is automatically added from ../apiExamples/yearMonthDay.html -->
-  <auro-input type="year-month-day" required>
-    <slot slot="label">Departure date</slot>
-  </auro-input>
-  <auro-input bordered type="year-month-day">
+  <auro-input type="year-month-day" bordered>
     <slot slot="label">Arrival date</slot>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
@@ -1068,10 +910,7 @@ Use the `type="year-month-day"` attribute for a date formatted input.
 <!-- The below code snippet is automatically added from ../apiExamples/yearMonthDay.html -->
 
 ```html
-<auro-input type="year-month-day" required>
-  <slot slot="label">Departure date</slot>
-</auro-input>
-<auro-input bordered type="year-month-day">
+<auro-input type="year-month-day" bordered>
   <slot slot="label">Arrival date</slot>
 </auro-input>
 ```
@@ -1079,10 +918,10 @@ Use the `type="year-month-day"` attribute for a date formatted input.
 </auro-accordion>
 Use the `type="month"` attribute for a date formatted input.
 
-<div class="exampleWrapper exampleWrapper--flex">
+<div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/month.html) -->
   <!-- The below content is automatically added from ../apiExamples/month.html -->
-  <auro-input type="month">
+  <auro-input type="month" bordered>
     <slot slot="label">Month</slot>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
@@ -1093,7 +932,7 @@ Use the `type="month"` attribute for a date formatted input.
 <!-- The below code snippet is automatically added from ../apiExamples/month.html -->
 
 ```html
-<auro-input type="month">
+<auro-input type="month" bordered>
   <slot slot="label">Month</slot>
 </auro-input>
 ```
@@ -1101,10 +940,10 @@ Use the `type="month"` attribute for a date formatted input.
 </auro-accordion>
 Use the `type="year"` attribute for a date formatted input.
 
-<div class="exampleWrapper exampleWrapper--flex">
+<div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/year.html) -->
   <!-- The below content is automatically added from ../apiExamples/year.html -->
-  <auro-input type="year">
+  <auro-input type="year" bordered>
     <slot slot="label">Year</slot>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
@@ -1115,7 +954,7 @@ Use the `type="year"` attribute for a date formatted input.
 <!-- The below code snippet is automatically added from ../apiExamples/year.html -->
 
 ```html
-<auro-input type="year">
+<auro-input type="year" bordered>
   <slot slot="label">Year</slot>
 </auro-input>
 ```
@@ -1123,10 +962,10 @@ Use the `type="year"` attribute for a date formatted input.
 </auro-accordion>
 Use the `type="fullYear"` attribute for a date formatted input.
 
-<div class="exampleWrapper exampleWrapper--flex">
+<div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/fullYear.html) -->
   <!-- The below content is automatically added from ../apiExamples/fullYear.html -->
-  <auro-input type="fullYear">
+  <auro-input type="fullYear" bordered>
     <slot slot="label">Full Year</slot>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
@@ -1137,7 +976,7 @@ Use the `type="fullYear"` attribute for a date formatted input.
 <!-- The below code snippet is automatically added from ../apiExamples/fullYear.html -->
 
 ```html
-<auro-input type="fullYear">
+<auro-input type="fullYear" bordered>
   <slot slot="label">Full Year</slot>
 </auro-input>
 ```
@@ -1146,11 +985,55 @@ 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.
 
-<div class="exampleWrapper exampleWrapper--flex">
+<div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/swapValue.html) -->
   <!-- The below content is automatically added from ../apiExamples/swapValue.html -->
   <auro-input id="swapExampleLeft" bordered>