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

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 -->
 
@@ -33,49 +16,49 @@ 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
 
-| Method       | Type          | Description                              |
-|--------------|---------------|------------------------------------------|
-| [isDateType](#isDateType) | `(): boolean` |                                          |
-| [reset](#reset)      | `(): void`    | Resets component to initial state.       |
-| [validate](#validate)   | `(): void`    | Public method force validation of input. |
+| Method       | Type                                   | Description                                      |
+|--------------|----------------------------------------|--------------------------------------------------|
+| [isDateType](#isDateType) | `(): boolean`                          |                                                  |
+| [reset](#reset)      | `(): void`                             | Resets component to initial state.               |
+| [validate](#validate)   | `(force?: boolean \| undefined): void` | Validates value.<br /><br />**force**: Whether to force validation. |
 
 ## Events
 
@@ -117,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>
@@ -130,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 -->
@@ -141,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>
@@ -158,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>
@@ -171,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>
@@ -189,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>
@@ -236,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="setUndefinedValueBtn">Set Value to Undefined</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>
@@ -250,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="setUndefinedValueBtn">Set Value to Undefined</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>
@@ -288,7 +261,7 @@ The `setCustomValidityRangeOverflow` attribute may optionally be used in combina
 <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 -->
@@ -299,7 +272,7 @@ The `setCustomValidityRangeOverflow` attribute may optionally be used in combina
 <!-- 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>
 ```
@@ -311,7 +284,7 @@ The `setCustomValidityRangeOverflow` attribute may optionally be used in combina
 <div class="exampleWrapper">
   <!-- 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.">
+  <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 -->
@@ -322,49 +295,13 @@ The `setCustomValidityRangeOverflow` attribute may optionally be used in combina
 <!-- 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>
 ```
 <!-- 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.
 
@@ -375,7 +312,7 @@ The `setCustomValidityRangeUnderflow` attribute may optionally be used in combin
 <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 -->
@@ -386,7 +323,7 @@ The `setCustomValidityRangeUnderflow` attribute may optionally be used in combin
 <!-- 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>
 ```
@@ -398,7 +335,7 @@ The `setCustomValidityRangeUnderflow` attribute may optionally be used in combin
 <div class="exampleWrapper">
   <!-- 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.">
+  <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 -->
@@ -409,26 +346,50 @@ The `setCustomValidityRangeUnderflow` attribute may optionally be used in combin
 <!-- 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>
 
+### 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">
+  <!-- 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/maxLength.html) -->
+<!-- The below code snippet is automatically added from ../apiExamples/maxLength.html -->
+
+```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 -->
+</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">
+<div class="exampleWrapper">
   <!-- 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.">
+  <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>
@@ -440,11 +401,7 @@ The `setCustomValidityTooShort` attribute may optionally be used in combination
 <!-- 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.">
+<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>
@@ -455,16 +412,12 @@ 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">
+<div class="exampleWrapper">
   <!-- 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">
+  <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>
@@ -476,40 +429,10 @@ 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" bordered>
   <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>
-</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).
-
-<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-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 -->
-
-```html
-<auro-input borderless>
-  <span slot="label">Name</span>
-  <span slot="helptext">Please enter your full name.</span>
-</auro-input>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
@@ -523,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>
@@ -537,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>
@@ -567,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>
@@ -586,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>
@@ -601,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>
@@ -620,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>
@@ -641,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>
@@ -661,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>
@@ -675,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>
@@ -694,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>
@@ -711,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>
@@ -730,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>
@@ -745,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>
@@ -763,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>
@@ -798,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>
@@ -816,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>
@@ -833,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>
@@ -851,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>
@@ -868,14 +747,10 @@ Use the `type="number"` attribute for a numeric style input and invoke a numeric
 
 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">
+<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">Number of Passengers</slot>
-    <slot slot="helptext">Please enter the number of passengers.</slot>
-  </auro-input>
-  <auro-input bordered required type="number">
+  <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>
@@ -887,11 +762,7 @@ This `number` input type should only be used for incremental numeric values, mea
 <!-- The below code snippet is automatically added from ../apiExamples/number.html -->
 
 ```html
-<auro-input required type="number">
-  <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">
+<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>
@@ -905,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>
@@ -923,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>
@@ -937,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>
@@ -956,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>
@@ -971,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 -->
@@ -988,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>
 ```
@@ -999,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 -->
@@ -1016,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>
 ```
@@ -1027,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 -->
@@ -1044,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>
 ```
@@ -1055,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 -->
@@ -1072,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>
 ```
@@ -1083,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 -->
@@ -1097,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>
 ```
@@ -1105,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 -->
@@ -1119,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>
 ```
@@ -1127,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 -->
@@ -1141,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>
 ```
@@ -1158,7 +993,7 @@ Use the `reset()` method to reset the `<auro-input>`'s `value` and `validity` st
   <!-- 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 />
+  <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>
@@ -1172,7 +1007,7 @@ Use the `reset()` method to reset the `<auro-input>`'s `value` and `validity` st
 
 ```html
 <auro-button id="resetStateBtn">Reset</auro-button>
-<br /><br />
+<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>
@@ -1198,7 +1033,7 @@ export function resetStateExample() {
 
 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>