@aurodesignsystem/auro-formkit 2.0.0-beta.5 → 2.0.0-beta.50

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 -->
 
@@ -34,13 +17,14 @@ 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] |
+| [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`  |             |                                                  |
+| [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. |
+| [format](#format)                          | `format`                          | `string`  |             | Specifies the input mask format.                 |
 | [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.              |
@@ -64,18 +48,17 @@ Generate unique names for dependency components.
 | [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`. |
+| [type](#type)                            | `type`                            | `string`  |             | Populates the `type` attribute on the input. Allowed values are `password`, `email`, `credit-card`, `date`, `tel` 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                                      |
+|------------|----------------------------------------|--------------------------------------------------|
+| [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,13 +124,10 @@ 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">
+  <auro-input disabled bordered type="date">
     <slot slot="label">Arrival date</slot>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
@@ -158,10 +138,7 @@ 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">
+<auro-input disabled bordered type="date">
   <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="date" 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="date" 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,7 +295,7 @@ 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>
 ```
@@ -339,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="date" 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 -->
@@ -350,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="date" min="03/25/2023" setCustomValidityRangeUnderflow="The selected date is before the defined minimum date." bordered>
   <span slot="label">Choose a date</span>
 </auro-input>
 ```
@@ -362,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 -->
@@ -373,7 +346,7 @@ 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>
 ```
@@ -385,14 +358,10 @@ 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">
+<div class="exampleWrapper">
   <!-- 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.">
+  <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>
@@ -404,11 +373,7 @@ The `setCustomValidityTooLong` attribute may optionally be used in combination w
 <!-- 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.">
+<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>
@@ -421,14 +386,10 @@ 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>
@@ -457,14 +414,10 @@ Use the `pattern` attribute to set custom input validation. This example also us
 
 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" 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" setCustomValidityPatternMismatch="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,11 +429,7 @@ 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" 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" setCustomValidityPatternMismatch="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>
@@ -488,32 +437,6 @@ The `<auro-input>` component supports setting a custom validity message specific
 <!-- 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>
-
 ### Readonly <a name="readonly"></a>
 Use the `readonly` attribute to prevent the user from editing the value of the input.
 
@@ -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>
@@ -632,6 +541,33 @@ For use cases where the field is `required`, but live validation is not wanted,
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
+### Format <a name="format"></a>
+Use the `format` attribute to set the format of the IMask. 
+
+Default masking definitions:
+- 0 : number
+- a : letter
+- \* : any character
+
+See [IMask](https://imask.js.org/) for more information on how to configure a mask.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/format.html) -->
+  <!-- The below content is automatically added from ../apiExamples/format.html -->
+  <auro-input bordered format="47440000"></auro-input>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/format.html) -->
+<!-- The below code snippet is automatically added from ../apiExamples/format.html -->
+
+```html
+<auro-input bordered format="47440000"></auro-input>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
 ## Error support and HTML5 Validity
 
 The `<auro-input>` component follows the HTML5 input `validity` and `validityState` [specification](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#client-side_validation).
@@ -643,12 +579,9 @@ When present, the `required` attribute specifies that an input field must be fil
 
 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 +594,6 @@ When the validity check fails, the validityState equals `valueMissing`. The erro
 <!-- 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,13 +605,9 @@ When the validity check fails, the validityState equals `valueMissing`. The erro
 ### 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-.']+)+" 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-.']+)+" 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>
@@ -694,10 +620,6 @@ 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-.']+)+" 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-.']+)+" 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>
@@ -711,13 +633,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 +648,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>
@@ -751,8 +665,9 @@ A custom error message can be set using the `error` attribute, or it can be used
   <!-- 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>
@@ -765,8 +680,9 @@ A custom error message can be set using the `error` attribute, or it can be used
 
 ```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>
@@ -800,12 +716,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>
@@ -818,9 +731,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>
@@ -835,13 +745,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>
@@ -853,10 +760,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>
@@ -870,14 +774,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>
@@ -889,11 +789,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>
@@ -907,13 +803,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>
@@ -925,10 +818,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>
@@ -939,13 +829,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>
@@ -958,10 +845,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>
@@ -969,101 +853,81 @@ Use the `type="credit-card"` and `icon` attributes for a credit card formatted i
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-### Date Format
+### Phone Number
 
-Use the `type="month-day-year"` attribute for a date formatted input.
+Use the `type="tel"` attribute for a phone number formatted input. The default format is `+1 (000) 000-0000`.
 
-<div class="exampleWrapper exampleWrapper--flex">
-  <!-- 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">
-    <slot slot="label">Arrival date</slot>
-  </auro-input>
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/tel.html) -->
+  <!-- The below content is automatically added from ../apiExamples/tel.html -->
+  <auro-input type="tel" bordered></auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/monthDayYear.html) -->
-<!-- The below code snippet is automatically added from ../apiExamples/monthDayYear.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/tel.html) -->
+<!-- The below code snippet is automatically added from ../apiExamples/tel.html -->
 
 ```html
-<auro-input type="month-day-year" required>
-  <slot slot="label">Departure date</slot>
-</auro-input>
-<auro-input bordered type="month-day-year">
-  <slot slot="label">Arrival date</slot>
-</auro-input>
+<auro-input type="tel" bordered></auro-input>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
-Use the `type="month-year"` attribute for a date formatted input.
+
+#### Formatting
 
-<div class="exampleWrapper exampleWrapper--flex">
-  <!-- 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>
-    <slot slot="label">Arrival date</slot>
-  </auro-input>
+Use the `format` attribute to set a custom phone number format.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/telFormat.html) -->
+  <!-- The below content is automatically added from ../apiExamples/telFormat.html -->
+  <auro-input type="tel" format="+22 999 99 9999" bordered></auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/monthYear.html) -->
-<!-- The below code snippet is automatically added from ../apiExamples/monthYear.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/telFormat.html) -->
+<!-- The below code snippet is automatically added from ../apiExamples/telFormat.html -->
 
 ```html
-<auro-input type="month-year">
-  <slot slot="label">Departure date</slot>
-</auro-input>
-<auro-input bordered type="month-year" required>
-  <slot slot="label">Arrival date</slot>
-</auro-input>
+<auro-input type="tel" format="+22 999 99 9999" bordered></auro-input>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
-Use the `type="month-fullYear"` attribute for a date formatted input.
+
+### Date
 
-<div class="exampleWrapper exampleWrapper--flex">
-  <!-- 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>
+Use the `type="date"` attribute for a date formatted input. The default date format is `mm/dd/yyyy`.
+
+<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="date" bordered>
     <slot slot="label">Arrival date</slot>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/monthFullYear.html) -->
-<!-- The below code snippet is automatically added from ../apiExamples/monthFullYear.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/monthDayYear.html) -->
+<!-- The below code snippet is automatically added from ../apiExamples/monthDayYear.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="date" bordered>
   <slot slot="label">Arrival date</slot>
 </auro-input>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
-Use the `type="year-month-day"` attribute for a date formatted input.
+
+#### Formatting
+
+Use the `format` attribute to put together any combination of `mm`, `dd`, & `yyyy` or `yy`.
 
-<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="date" format="yyyy/mm/dd" bordered>
     <slot slot="label">Arrival date</slot>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
@@ -1074,77 +938,48 @@ 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="date" format="yyyy/mm/dd" bordered>
   <slot slot="label">Arrival date</slot>
 </auro-input>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
-Use the `type="month"` attribute for a date formatted input.
-
-<div class="exampleWrapper exampleWrapper--flex">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/month.html) -->
-  <!-- The below content is automatically added from ../apiExamples/month.html -->
-  <auro-input type="month">
-    <slot slot="label">Month</slot>
-  </auro-input>
-  <!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/month.html) -->
-<!-- The below code snippet is automatically added from ../apiExamples/month.html -->
-
-```html
-<auro-input type="month">
-  <slot slot="label">Month</slot>
-</auro-input>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-Use the `type="year"` attribute for a date formatted input.
-
-<div class="exampleWrapper exampleWrapper--flex">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/year.html) -->
-  <!-- The below content is automatically added from ../apiExamples/year.html -->
-  <auro-input type="year">
-    <slot slot="label">Year</slot>
+<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="date" format="mm/yy" bordered>
+    <slot slot="label">Expiration date</slot>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/year.html) -->
-<!-- The below code snippet is automatically added from ../apiExamples/year.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/monthYear.html) -->
+<!-- The below code snippet is automatically added from ../apiExamples/monthYear.html -->
 
 ```html
-<auro-input type="year">
-  <slot slot="label">Year</slot>
+<auro-input type="date" format="mm/yy" bordered>
+  <slot slot="label">Expiration date</slot>
 </auro-input>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
-Use the `type="fullYear"` attribute for a date formatted input.
-
-<div class="exampleWrapper exampleWrapper--flex">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/fullYear.html) -->
-  <!-- The below content is automatically added from ../apiExamples/fullYear.html -->
-  <auro-input type="fullYear">
-    <slot slot="label">Full Year</slot>
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/day.html) -->
+  <!-- The below content is automatically added from ../apiExamples/day.html -->
+  <auro-input type="date" format="dd" bordered>
+    <slot slot="label">Day</slot>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/fullYear.html) -->
-<!-- The below code snippet is automatically added from ../apiExamples/fullYear.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/day.html) -->
+<!-- The below code snippet is automatically added from ../apiExamples/day.html -->
 
 ```html
-<auro-input type="fullYear">
-  <slot slot="label">Full Year</slot>
+<auro-input type="date" format="dd" bordered>
+  <slot slot="label">Day</slot>
 </auro-input>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -1160,7 +995,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>
@@ -1174,7 +1009,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>
@@ -1200,7 +1035,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>
@@ -1292,7 +1127,6 @@ The component may be restyled using the following code sample and changing the v
   --ds-auro-input-border-color: var(--ds-color-border-secondary-default, #{$ds-color-border-secondary-default});
   --ds-auro-input-container-color: var(--ds-color-container-primary-default, #{$ds-color-container-primary-default});
   --ds-auro-input-caret-color: var(--ds-color-text-ui-focus-default, #{$ds-color-text-ui-focus-default});
-  --ds-auro-input-help-text-color: var(--ds-color-text-tertiary-default, #{$ds-color-text-tertiary-default});
   --ds-auro-input-label-text-color: var(--ds-color-text-tertiary-default, #{$ds-color-text-tertiary-default});
   --ds-auro-input-placeholder-text-color: var(--ds-color-text-primary-default, #{$ds-color-text-primary-default});
   --ds-auro-input-text-color: var(--ds-color-text-primary-default, #{$ds-color-text-primary-default});