@aurodesignsystem/auro-formkit 2.0.0-beta.2 → 2.0.0-beta.4

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export default css`:host{position:relative;display:inline-block;max-width:100%}:host([fluid]){display:block}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);white-space:normal}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;overflow:hidden;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([matchwidth]) #bibSizer{width:100%}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`;
+export default css`:host{position:relative;display:inline-block;max-width:100%}:host([fluid]){display:block}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);transition:font-size .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:normal}.label[hasTrigger=false]{font-size:var(--ds-text-body-size-default, 1rem)}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;overflow:hidden;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([matchwidth]) #bibSizer{width:100%}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`;

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

@@ -19,8 +19,12 @@
 .label {
   font-size: var(--ds-text-body-size-xs, 0.75rem);
   line-height: var(--ds-text-body-size-default, 1rem);
+  transition: font-size 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
   white-space: normal;
 }
+.label[hasTrigger=false] {
+  font-size: var(--ds-text-body-size-default, 1rem);
+}
 
 .trigger {
   position: relative;

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

@@ -32,7 +32,12 @@
 .label {
   font-size: var(--ds-text-body-size-xs, $ds-text-body-size-xs);
   line-height: var(--ds-text-body-size-default, $ds-text-body-size-default);
+  transition: font-size .3s cubic-bezier(.215, .61, .355, 1);
   white-space: normal;
+
+  &[hasTrigger='false'] {
+    font-size: var(--ds-text-body-size-default, $ds-text-body-size-default);
+  }
 }
 
 .trigger {

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 688ms
+created dist in 551ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 330ms
+created ./demo/ in 314ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 189ms
+created ./demo/ in 300ms
 
 > @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 694ms
+created dist in 754ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 351ms
+created ./demo/ in 317ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 231ms
+created ./demo/ in 302ms

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

@@ -24,6 +24,16 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 
+More info and automated migrator: https://sass-lang.com/d/import
+
+  ╷
+6 │ @import 'mixins';
+  │         ^^^^^^^^
+  ╵
+    src/styles/borders.scss 6:9  root stylesheet
+
+DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+
 More info and automated migrator: https://sass-lang.com/d/import
 
   ╷
@@ -45,6 +55,16 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 
+More info and automated migrator: https://sass-lang.com/d/import
+
+  ╷
+8 │ @import 'mixins';
+  │         ^^^^^^^^
+  ╵
+    src/styles/color.scss 8:9  root stylesheet
+
+DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+
 More info and automated migrator: https://sass-lang.com/d/import
 
   ╷
@@ -65,6 +85,16 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 
+More info and automated migrator: https://sass-lang.com/d/import
+
+  ╷
+6 │ @import 'mixins';
+  │         ^^^^^^^^
+  ╵
+    src/styles/input.scss 6:9  root stylesheet
+
+DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+
 More info and automated migrator: https://sass-lang.com/d/import
 
   ╷
@@ -75,6 +105,16 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 
+More info and automated migrator: https://sass-lang.com/d/import
+
+  ╷
+3 │ @import 'mixins';
+  │         ^^^^^^^^
+  ╵
+    src/styles/label.scss 3:9  root stylesheet
+
+DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+
 More info and automated migrator: https://sass-lang.com/d/import
 
   ╷
@@ -85,6 +125,16 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 
+More info and automated migrator: https://sass-lang.com/d/import
+
+  ╷
+2 │ @import 'mixins';
+  │         ^^^^^^^^
+  ╵
+    src/styles/notificationIcons.scss 2:9  root stylesheet
+
+DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+
 More info and automated migrator: https://sass-lang.com/d/import
 
    ╷
@@ -133,7 +183,7 @@ More info and automated migrator: https://sass-lang.com/d/import
    ╵
     src/styles/style.scss 31:9  root stylesheet
 
-WARNING: 14 repetitive deprecation warnings omitted.
+WARNING: 18 repetitive deprecation warnings omitted.
 Run in verbose mode to see all warnings.
 
 DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

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

@@ -38,6 +38,16 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 
+More info and automated migrator: https://sass-lang.com/d/import
+
+  ╷
+6 │ @import 'mixins';
+  │         ^^^^^^^^
+  ╵
+    src/styles/borders.scss 6:9  root stylesheet
+
+DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+
 More info and automated migrator: https://sass-lang.com/d/import
 
   ╷
@@ -59,6 +69,16 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 
+More info and automated migrator: https://sass-lang.com/d/import
+
+  ╷
+8 │ @import 'mixins';
+  │         ^^^^^^^^
+  ╵
+    src/styles/color.scss 8:9  root stylesheet
+
+DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+
 More info and automated migrator: https://sass-lang.com/d/import
 
   ╷
@@ -79,6 +99,16 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 
+More info and automated migrator: https://sass-lang.com/d/import
+
+  ╷
+6 │ @import 'mixins';
+  │         ^^^^^^^^
+  ╵
+    src/styles/input.scss 6:9  root stylesheet
+
+DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+
 More info and automated migrator: https://sass-lang.com/d/import
 
   ╷
@@ -89,6 +119,16 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 
+More info and automated migrator: https://sass-lang.com/d/import
+
+  ╷
+3 │ @import 'mixins';
+  │         ^^^^^^^^
+  ╵
+    src/styles/label.scss 3:9  root stylesheet
+
+DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+
 More info and automated migrator: https://sass-lang.com/d/import
 
   ╷
@@ -99,6 +139,16 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 
+More info and automated migrator: https://sass-lang.com/d/import
+
+  ╷
+2 │ @import 'mixins';
+  │         ^^^^^^^^
+  ╵
+    src/styles/notificationIcons.scss 2:9  root stylesheet
+
+DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+
 More info and automated migrator: https://sass-lang.com/d/import
 
    ╷
@@ -147,7 +197,7 @@ More info and automated migrator: https://sass-lang.com/d/import
    ╵
     src/styles/style.scss 31:9  root stylesheet
 
-WARNING: 14 repetitive deprecation warnings omitted.
+WARNING: 18 repetitive deprecation warnings omitted.
 Run in verbose mode to see all warnings.
 
 DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
@@ -166,13 +216,13 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 
 ./src/index.js → dist...
-created dist in 1.2s
+created dist in 1.6s
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 1s
+created ./demo/ in 656ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 927ms
+created ./demo/ in 953ms
 
 > @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
@@ -228,9 +278,9 @@ Retrieving latest "/home/runner/work/auro-formkit/auro-formkit/components/input/
   ⁕ FILE:src=../apiExamples/value.html 
   ⁕ FILE:src=../apiExamples/maxDate.html 
   ⁕ FILE:src=../apiExamples/maxNumber.html 
-  ⁕ FILE:src=../apiExamples/maxLength.html 
   ⁕ FILE:src=../apiExamples/minDate.html 
   ⁕ FILE:src=../apiExamples/minNumber.html 
+  ⁕ FILE:src=../apiExamples/maxLength.html 
   ⁕ FILE:src=../apiExamples/minLength.html 
   ⁕ FILE:src=../apiExamples/pattern.html 
   ⁕ FILE:src=../apiExamples/borderless.html 
@@ -263,9 +313,9 @@ Retrieving latest "/home/runner/work/auro-formkit/auro-formkit/components/input/
   ⁕ CODE:src=../apiExamples/value.js 
   ⁕ CODE:src=../apiExamples/maxDate.html 
   ⁕ CODE:src=../apiExamples/maxNumber.html 
-  ⁕ CODE:src=../apiExamples/maxLength.html 
   ⁕ CODE:src=../apiExamples/minDate.html 
   ⁕ CODE:src=../apiExamples/minNumber.html 
+  ⁕ CODE:src=../apiExamples/maxLength.html 
   ⁕ CODE:src=../apiExamples/minLength.html 
   ⁕ CODE:src=../apiExamples/pattern.html 
   ⁕ CODE:src=../apiExamples/borderless.html 

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

@@ -4,10 +4,10 @@
 
 
 ./src/index.js → dist...
-created dist in 1.3s
+created dist in 1.2s
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 794ms
+created ./demo/ in 936ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 737ms
+created ./demo/ in 972ms

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

@@ -7,6 +7,7 @@ Rendering src/styles/color.css...
 Rendering src/styles/helpText.css...
 Rendering src/styles/input.css...
 Rendering src/styles/label.css...
+Rendering src/styles/mixins.css...
 Rendering src/styles/notificationIcons.css...
 Rendering src/styles/style.css...
 Rendering src/styles/tokens.css...
@@ -42,6 +43,11 @@ DEPRECATION WARNING: The legacy JS API is deprecated and will be removed in Dart
 
 More info: https://sass-lang.com/d/legacy-js-api
 
+DEPRECATION WARNING: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
+
+More info: https://sass-lang.com/d/legacy-js-api
+
+Complete!
 Complete!
 Complete!
 Complete!

package/components/input/demo/api.md

@@ -33,41 +33,41 @@ Generate unique names for dependency components.
 
 | Property                          | Attribute                         | Type      | Default     | Description                                      |
 |-----------------------------------|-----------------------------------|-----------|-------------|--------------------------------------------------|
-| [activeLabel](#activeLabel)                     | `activeLabel`                     | `Boolean` | false       | If set, the label will remain fixed in the active position. |
-| [autocapitalize](#autocapitalize)                  | `autocapitalize`                  | `String`  |             | An enumerated attribute that controls whether and how text input is automatically capitalized as it is entered/edited by the user. [off/none, on/sentences, words, characters] |
-| [autocomplete](#autocomplete)                    | `autocomplete`                    | `String`  |             | An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete="off"` is supported. |
-| [autocorrect](#autocorrect)                     | `autocorrect`                     | `String`  |             | When set to `off`, stops iOS from auto correcting words when typed into a text box. |
-| [customValidityTypeEmail](#customValidityTypeEmail)         | `customValidityTypeEmail`         | `string`  |             |                                                  |
-| [disabled](#disabled)                        | `disabled`                        | `Boolean` | false       | If set, disables the input.                      |
-| [error](#error)                           | `error`                           | `String`  |             | When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value. |
-| [errorMessage](#errorMessage)                    | `errorMessage`                    | `String`  |             | Contains the help text message for the current validity error. |
-| [icon](#icon)                            | `icon`                            | `Boolean` | false       | If set, will render an icon inside the input to the left of the value. Support is limited to auro-input instances with credit card format. |
-| [id](#id)                              | `id`                              | `String`  |             | Sets the unique ID of the element.               |
-| [lang](#lang)                            | `lang`                            | `String`  |             | defines the language of an element.              |
-| [max](#max)                             | `max`                             | `String`  | "undefined" | The maximum value allowed. This only applies for inputs with a type of `number` and all date formats. |
-| [maxLength](#maxLength)                       | `maxLength`                       | `Number`  | "undefined" | The maximum number of characters the user can enter into the text input. This must be an integer value `0` or higher. |
-| [min](#min)                             | `min`                             | `String`  | "undefined" | The minimum value allowed. This only applies for inputs with a type of `number` and all date formats. |
-| [minLength](#minLength)                       | `minLength`                       | `Number`  | "undefined" | The minimum number of characters the user can enter into the text input. This must be an non-negative integer value smaller than or equal to the value specified by `maxlength`. |
-| [name](#name)                            | `name`                            | `String`  |             | Populates the `name` attribute on the input.     |
-| [noValidate](#noValidate)                      | `noValidate`                      | `Boolean` | false       | If set, disables auto-validation on blur.        |
-| [pattern](#pattern)                         | `pattern`                         | `String`  |             | Specifies a regular expression the form control's value should match. |
-| [placeholder](#placeholder)                     | `placeholder`                     | `String`  |             | Define custom placeholder text, only supported by date input formats. |
-| [readonly](#readonly)                        | `readonly`                        | `Boolean` |             | Makes the input read-only, but can be set programmatically. |
-| [required](#required)                        | `required`                        | `Boolean` | false       | Populates the `required` attribute on the input. Used for client-side validation. |
-| [setCustomValidity](#setCustomValidity)               | `setCustomValidity`               | `String`  |             | Sets a custom help text message to display for all validityStates. |
-| [setCustomValidityBadInput](#setCustomValidityBadInput)       | `setCustomValidityBadInput`       | `String`  |             | Custom help text message to display when validity = `badInput`. |
-| [setCustomValidityCustomError](#setCustomValidityCustomError)    | `setCustomValidityCustomError`    | `String`  |             | Custom help text message to display when validity = `customError`. |
-| [setCustomValidityForType](#setCustomValidityForType)        | `setCustomValidityForType`        | `String`  | "undefined" | Custom help text message to display for the declared element `type` and type validity fails. |
-| [setCustomValidityRangeOverflow](#setCustomValidityRangeOverflow)  | `setCustomValidityRangeOverflow`  | `String`  |             | Custom help text message to display when validity = `rangeOverflow`. |
-| [setCustomValidityRangeUnderflow](#setCustomValidityRangeUnderflow) | `setCustomValidityRangeUnderflow` | `String`  |             | Custom help text message to display when validity = `rangeUnderflow`. |
-| [setCustomValidityTooLong](#setCustomValidityTooLong)        | `setCustomValidityTooLong`        | `String`  |             | Custom help text message to display when validity = `tooLong`. |
-| [setCustomValidityTooShort](#setCustomValidityTooShort)       | `setCustomValidityTooShort`       | `String`  |             | Custom help text message to display when validity = `tooShort`. |
-| [setCustomValidityValueMissing](#setCustomValidityValueMissing)   | `setCustomValidityValueMissing`   | `String`  |             | Custom help text message to display when validity = `valueMissing`. |
-| [spellcheck](#spellcheck)                      | `spellcheck`                      | `String`  |             | An enumerated attribute defines whether the element may be checked for spelling errors. [true, false]. When set to `false` the attribute `autocorrect` is set to `off` and `autocapitalize` is set to `none`. |
-| [type](#type)                            | `type`                            | `String`  |             | Populates the `type` attribute on the input. Allowed values are `password`, `email`, `credit-card`, `month-day-year`, `month-year`, `year-month-day`  or `text`. If given value is not allowed or set, defaults to `text`. |
-| [validateOnInput](#validateOnInput)                 | `validateOnInput`                 | `Boolean` |             | Sets validation mode to re-eval with each input. |
-| [validity](#validity)                        | `validity`                        | `String`  |             | Specifies the `validityState` this element is in. |
-| [value](#value)                           | `value`                           | `String`  |             | Populates the `value` attribute on the input. Can also be read to retrieve the current value of the input. |
+| [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
 
@@ -329,42 +329,6 @@ The `setCustomValidityRangeOverflow` attribute may optionally be used in combina
 <!-- 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 `number` or any date format.
 
@@ -416,6 +380,42 @@ The `setCustomValidityRangeUnderflow` attribute may optionally be used in combin
 <!-- 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 Length <a name="minLength"></a>
 Use the `minlength` attribute to control the length of the input entered.
 
@@ -455,16 +455,16 @@ The `setCustomValidityTooShort` attribute may optionally be used in combination
 ### 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 `setCustomValidityBadInput` attribute.
+The `<auro-input>` component supports setting a custom validity message specific to the pattern validation by using the `setCustomValidityPatternMismatch` attribute.
 
 <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">
+  <auro-input pattern="[a-z]{1,15}" spellcheck="false" setCustomValidityPatternMismatch="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">
+  <auro-input bordered pattern="[a-z]{1,15}" spellcheck="false" setCustomValidityPatternMismatch="Only contain lowercase letters w/no spaces">
     <span slot="label">Username</span>
     <span slot="helptext">Please enter a username.</span>
   </auro-input>
@@ -476,11 +476,11 @@ The `<auro-input>` component supports setting a custom validity message specific
 <!-- The below code snippet is automatically added from ../apiExamples/pattern.html -->
 
 ```html
-<auro-input pattern="[a-z]{1,15}" spellcheck="false" setCustomValidityBadInput="Only contain lowercase letters w/no spaces">
+<auro-input pattern="[a-z]{1,15}" spellcheck="false" setCustomValidityPatternMismatch="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">
+<auro-input bordered pattern="[a-z]{1,15}" spellcheck="false" setCustomValidityPatternMismatch="Only contain lowercase letters w/no spaces">
   <span slot="label">Username</span>
   <span slot="helptext">Please enter a username.</span>
 </auro-input>
@@ -641,7 +641,7 @@ 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">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/required.html) -->
@@ -678,11 +678,11 @@ Use the `validateOnInput` attribute to enable live validation on the `input` eve
 <div class="exampleWrapper exampleWrapper--flex">
   <!-- 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.">
+  <auro-input validateOnInput 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>
-  <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>
@@ -694,11 +694,11 @@ 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.">
+<auro-input validateOnInput 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>
-<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>
@@ -745,6 +745,8 @@ 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 -->