@aurodesignsystem/auro-formkit 1.6.0-beta.10 → 1.6.0-beta.12

package/components/dropdown/.turbo/turbo-bundler.log

@@ -4,10 +4,10 @@
 
 
 ./src/index.js → dist...
-created dist in 1.2s
+created dist in 1.1s
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 917ms
+created ./demo/ in 894ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 606ms
+created ./demo/ in 631ms

package/components/dropdown/demo/api.min.js

@@ -2433,7 +2433,7 @@ var colorCss$1 = i$3`.label{color:var(--ds-auro-dropdown-label-text-color)}.trig
 
 var tokensCss = i$3`:host{--ds-auro-dropdown-help-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-dropdown-label-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-dropdown-popover-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdown-popover-border-color: transparent;--ds-auro-dropdown-popover-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdown-trigger-border-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdownbib-text-color: var(--ds-color-text-primary-default, #2a2a2a)}`;
 
-var styleCss = i$3`:host{position:absolute;z-index:var(--depth-tooltip, 400);display:none}.container{display:inline-block;overflow:auto;box-sizing:border-box;margin:var(--ds-size-50, 0.25rem) 0}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;margin-top:0;box-shadow:unset}:host([data-show]){display:flex}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common]) .container,:host([inset]) .container{padding:var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}`;
+var styleCss = i$3`:host{position:absolute;z-index:var(--depth-tooltip, 400);display:none}.container{display:inline-block;overflow:auto;box-sizing:border-box;margin:var(--ds-size-50, 0.25rem) 0}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;margin-top:0;box-shadow:unset}:host([data-show]){display:flex}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}`;
 
 var colorCss = i$3`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`;
 

package/components/dropdown/demo/index.min.js

@@ -2408,7 +2408,7 @@ var colorCss$1 = i$3`.label{color:var(--ds-auro-dropdown-label-text-color)}.trig
 
 var tokensCss = i$3`:host{--ds-auro-dropdown-help-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-dropdown-label-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-dropdown-popover-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdown-popover-border-color: transparent;--ds-auro-dropdown-popover-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdown-trigger-border-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdownbib-text-color: var(--ds-color-text-primary-default, #2a2a2a)}`;
 
-var styleCss = i$3`:host{position:absolute;z-index:var(--depth-tooltip, 400);display:none}.container{display:inline-block;overflow:auto;box-sizing:border-box;margin:var(--ds-size-50, 0.25rem) 0}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;margin-top:0;box-shadow:unset}:host([data-show]){display:flex}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common]) .container,:host([inset]) .container{padding:var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}`;
+var styleCss = i$3`:host{position:absolute;z-index:var(--depth-tooltip, 400);display:none}.container{display:inline-block;overflow:auto;box-sizing:border-box;margin:var(--ds-size-50, 0.25rem) 0}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;margin-top:0;box-shadow:unset}:host([data-show]){display:flex}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}`;
 
 var colorCss = i$3`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`;
 

package/components/dropdown/dist/index.js

@@ -2408,7 +2408,7 @@ var colorCss$1 = i$3`.label{color:var(--ds-auro-dropdown-label-text-color)}.trig
 
 var tokensCss = i$3`:host{--ds-auro-dropdown-help-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-dropdown-label-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-dropdown-popover-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdown-popover-border-color: transparent;--ds-auro-dropdown-popover-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdown-trigger-border-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdownbib-text-color: var(--ds-color-text-primary-default, #2a2a2a)}`;
 
-var styleCss = i$3`:host{position:absolute;z-index:var(--depth-tooltip, 400);display:none}.container{display:inline-block;overflow:auto;box-sizing:border-box;margin:var(--ds-size-50, 0.25rem) 0}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;margin-top:0;box-shadow:unset}:host([data-show]){display:flex}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common]) .container,:host([inset]) .container{padding:var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}`;
+var styleCss = i$3`:host{position:absolute;z-index:var(--depth-tooltip, 400);display:none}.container{display:inline-block;overflow:auto;box-sizing:border-box;margin:var(--ds-size-50, 0.25rem) 0}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;margin-top:0;box-shadow:unset}:host([data-show]){display:flex}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}`;
 
 var colorCss = i$3`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`;
 

package/components/dropdown/src/styles/bibStyles-css.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export default css`:host{position:absolute;z-index:var(--depth-tooltip, 400);display:none}.container{display:inline-block;overflow:auto;box-sizing:border-box;margin:var(--ds-size-50, 0.25rem) 0}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;margin-top:0;box-shadow:unset}:host([data-show]){display:flex}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common]) .container,:host([inset]) .container{padding:var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}`;
+export default css`:host{position:absolute;z-index:var(--depth-tooltip, 400);display:none}.container{display:inline-block;overflow:auto;box-sizing:border-box;margin:var(--ds-size-50, 0.25rem) 0}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;margin-top:0;box-shadow:unset}:host([data-show]){display:flex}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}`;

package/components/dropdown/src/styles/bibStyles.css

@@ -36,11 +36,6 @@
   border-radius: var(--ds-border-radius, 0.375rem);
 }
 
-:host([common]) .container,
-:host([inset]) .container {
-  padding: var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem);
-}
-
 :host([common][isfullscreen]) .container,
 :host([rounded][isfullscreen]) .container {
   border-radius: unset;

package/components/dropdown/src/styles/bibStyles.scss

@@ -51,13 +51,6 @@
   }
 }
 
-:host([common]),
-:host([inset]) {
-  .container {
-    padding: var(--ds-size-50, $ds-size-50) var(--ds-size-100, $ds-size-100);
-  }
-}
-
 :host([common][isfullscreen]),
 :host([rounded][isfullscreen]) {
   .container {

package/components/form/.turbo/turbo-build.log

@@ -69,13 +69,13 @@ Run in verbose mode to see all warnings.
 
 
 ./src/index.js → dist...
-created dist in 340ms
+created dist in 477ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 216ms
+created ./demo/ in 214ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 264ms
+created ./demo/ in 268ms
 
 > @auro-formkit/auro-form@1.0.0 build:docs
 > wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component form

package/components/form/.turbo/turbo-bundler.log

@@ -4,10 +4,10 @@
 
 
 ./src/index.js → dist...
-created dist in 504ms
+created dist in 429ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 353ms
+created ./demo/ in 219ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 389ms
+created ./demo/ in 157ms

package/components/input/.turbo/turbo-build$colon$sass.log

@@ -58,10 +58,10 @@ DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Da
 More info and automated migrator: https://sass-lang.com/d/import
 
   ╷
-2 │ @import '@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
+4 │ @import '@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
   │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
-    src/styles/input.scss 2:9  root stylesheet
+    src/styles/input.scss 4:9  root stylesheet
 
 DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 

package/components/input/.turbo/turbo-build.log

@@ -72,10 +72,10 @@ DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Da
 More info and automated migrator: https://sass-lang.com/d/import
 
   ╷
-2 │ @import '@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
+4 │ @import '@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
   │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
-    src/styles/input.scss 2:9  root stylesheet
+    src/styles/input.scss 4:9  root stylesheet
 
 DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 
@@ -166,13 +166,13 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 
 ./src/index.js → dist...
-created dist in 1.3s
+created dist in 1.5s
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 875ms
+created ./demo/ in 1s
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 783ms
+created ./demo/ in 778ms
 
 > @auro-formkit/auro-input@4.2.0 build:docs
 > wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component input
@@ -227,9 +227,11 @@ Retrieving latest "/home/runner/work/auro-formkit/auro-formkit/components/input/
   ⁕ FILE:src=../apiExamples/programmaticValue.html 
   ⁕ FILE:src=../apiExamples/value.html 
   ⁕ FILE:src=../apiExamples/maxDate.html 
-  ⁕ FILE:src=../apiExamples/maxNumeric.html 
+  ⁕ FILE:src=../apiExamples/maxNumber.html 
+  ⁕ FILE:src=../apiExamples/maxLength.html 
   ⁕ FILE:src=../apiExamples/minDate.html 
-  ⁕ FILE:src=../apiExamples/minNumeric.html 
+  ⁕ FILE:src=../apiExamples/minNumber.html 
+  ⁕ FILE:src=../apiExamples/minLength.html 
   ⁕ FILE:src=../apiExamples/pattern.html 
   ⁕ FILE:src=../apiExamples/borderless.html 
   ⁕ FILE:src=../apiExamples/readonly.html 
@@ -242,8 +244,6 @@ Retrieving latest "/home/runner/work/auro-formkit/auro-formkit/components/input/
   ⁕ FILE:src=../apiExamples/password.html 
   ⁕ FILE:src=../apiExamples/email.html 
   ⁕ FILE:src=../apiExamples/number.html 
-  ⁕ FILE:src=../apiExamples/maxLength.html 
-  ⁕ FILE:src=../apiExamples/minLength.html 
   ⁕ FILE:src=../apiExamples/creditCard.html 
   ⁕ FILE:src=../apiExamples/creditCardIcon.html 
   ⁕ FILE:src=../apiExamples/monthDayYear.html 
@@ -253,6 +253,7 @@ Retrieving latest "/home/runner/work/auro-formkit/auro-formkit/components/input/
   ⁕ FILE:src=../apiExamples/month.html 
   ⁕ FILE:src=../apiExamples/year.html 
   ⁕ FILE:src=../apiExamples/fullYear.html 
+  ⁕ FILE:src=../apiExamples/resetState.html 
   ⁕ FILE:src=../apiExamples/swapValue.html 
   ⁕ CODE:src=../apiExamples/basic.html 
   ⁕ CODE:src=../apiExamples/disabled.html 
@@ -261,9 +262,11 @@ Retrieving latest "/home/runner/work/auro-formkit/auro-formkit/components/input/
   ⁕ CODE:src=../apiExamples/value.html 
   ⁕ CODE:src=../apiExamples/value.js 
   ⁕ CODE:src=../apiExamples/maxDate.html 
-  ⁕ CODE:src=../apiExamples/maxNumeric.html 
+  ⁕ CODE:src=../apiExamples/maxNumber.html 
+  ⁕ CODE:src=../apiExamples/maxLength.html 
   ⁕ CODE:src=../apiExamples/minDate.html 
-  ⁕ CODE:src=../apiExamples/minNumeric.html 
+  ⁕ CODE:src=../apiExamples/minNumber.html 
+  ⁕ CODE:src=../apiExamples/minLength.html 
   ⁕ CODE:src=../apiExamples/pattern.html 
   ⁕ CODE:src=../apiExamples/borderless.html 
   ⁕ CODE:src=../apiExamples/readonly.html 
@@ -278,8 +281,6 @@ Retrieving latest "/home/runner/work/auro-formkit/auro-formkit/components/input/
   ⁕ CODE:src=../apiExamples/password.html 
   ⁕ CODE:src=../apiExamples/email.html 
   ⁕ CODE:src=../apiExamples/number.html 
-  ⁕ CODE:src=../apiExamples/maxLength.html 
-  ⁕ CODE:src=../apiExamples/minLength.html 
   ⁕ CODE:src=../apiExamples/creditCard.html 
   ⁕ CODE:src=../apiExamples/creditCardIcon.html 
   ⁕ CODE:src=../apiExamples/monthDayYear.html 
@@ -289,6 +290,8 @@ Retrieving latest "/home/runner/work/auro-formkit/auro-formkit/components/input/
   ⁕ CODE:src=../apiExamples/month.html 
   ⁕ CODE:src=../apiExamples/year.html 
   ⁕ CODE:src=../apiExamples/fullYear.html 
+  ⁕ CODE:src=../apiExamples/resetState.html 
+  ⁕ CODE:src=../apiExamples/resetState.js 
   ⁕ CODE:src=../apiExamples/swapValue.html 
   ⁕ CODE:src=../apiExamples/swapValue.js 
   ⁕ CODE:src=../src/styles/tokens.scss 

package/components/input/.turbo/turbo-bundler.log

@@ -4,10 +4,10 @@
 
 
 ./src/index.js → dist...
-created dist in 1.6s
+created dist in 1.3s
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 960ms
+created ./demo/ in 905ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 843ms
+created ./demo/ in 600ms

package/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

package/components/input/demo/api.md

@@ -44,12 +44,11 @@ Generate unique names for dependency components.
 | [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. |
+| [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 `numeric` and all date formats. |
+| [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.        |
@@ -77,6 +76,7 @@ Generate unique names for dependency components.
 | 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 +238,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 +252,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 +268,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 +281,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 +308,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 +320,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 +331,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 +395,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 +407,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 +418,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 +868,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 +890,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 +1152,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.