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

package/components/input/README.md

@@ -18,7 +18,6 @@ The following sections are editable by making changes to the following files:
 -->
 
 # Input
-
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
 <!-- The below content is automatically added from ./docs/partials/description.md -->
 Use the `<auro-input>` custom element to create basic single-line text fields. Supports type `text`, `password`, and `email` with validation, required input, error states and a secondary `bordered` theme. Use the slots `label` and `helptext` for additional content support.
@@ -27,42 +26,55 @@ Use the `<auro-input>` custom element to create basic single-line text fields. S
 <!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md -->
 <!-- AURO-GENERATED-CONTENT:END -->
 
-## UI development browser support
-
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/browserSupport.md) -->
-For the most up to date information on [UI development browser support](https://auro.alaskaair.com/support/browsersSupport)
-
-<!-- AURO-GENERATED-CONTENT:END -->
-
-## Install
-
+## Getting Started
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/componentInstall.md) -->
 <!-- The below content is automatically added from ../../docs/templates/componentInstall.md -->
 
+#### NPM Installation
+
 ```shell
 $ npm i @aurodesignsystem/auro-formkit
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/gettingStarted.md) -->
+<!-- The below content is automatically added from ../../docs/templates/gettingStarted.md -->
 
-### Design Token CSS Custom Property dependency
+### Import Options
+
+#### Automatic Registration
 
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/designTokens.md) -->
-The use of any Auro custom element has a dependency on the [Auro Design Tokens](https://auro.alaskaair.com/getting-started/developers/design-tokens).
+For automatic registration, simply import the component:
 
-<!-- AURO-GENERATED-CONTENT:END -->
+```javascript
+// Registers <auro-input> automatically
+import '@aurodesignsystem/auro-formkit/auro-input';
+```
 
-### Define dependency in project component
+#### Custom Registration
 
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/componentImportDescription.md) -->
-Defining the component dependency within each component that is using the `<auro-input>` component.
+To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our static `AuroInput.register('custom-input')` method on the component class and pass in a unique name.
 
-<!-- AURO-GENERATED-CONTENT:END -->
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/componentUsage.md) -->
-<!-- The below content is automatically added from ../../docs/templates/componentUsage.md -->
+```javascript
+// Import the class only
+import { AuroInput } from '@aurodesignsystem/auro-formkit/auro-input/class';
+
+// Register with a custom name if desired
+AuroInput.register('custom-input');
+```
 
-```js
-import "@aurodesignsystem/auro-formkit/auro-input";
+#### TypeScript Module Resolution
+
+When using TypeScript set `moduleResolution` to `bundler`, add the following to your `tsconfig.json`:
+
+```json
+{
+    "compilerOptions": {
+        "moduleResolution": "bundler"
+    }
+}
 ```
+
+This configuration enables proper module resolution for the component's TypeScript files.
 <!-- AURO-GENERATED-CONTENT:END -->
 **Reference component in HTML**
 
@@ -74,26 +86,30 @@ import "@aurodesignsystem/auro-formkit/auro-input";
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 
-## Install bundled assets from CDN
+### Design Token CSS Custom Property dependency
 
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/bundleInstallDescription.md) -->
-In cases where the project is not able to process JS assets, there are pre-processed assets available for use. See -- `auro-input__bundled.js` for modern browsers. Legacy browsers such as IE11 are no longer supported.
+<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/designTokens.md) -->
+The use of any Auro custom element has a dependency on the [Auro Design Tokens](https://auro.alaskaair.com/getting-started/developers/design-tokens).
 
-**WARNING!** When installing into your application environment, DO NOT use `@latest` for the requested version. Risks include unknown MAJOR version releases and instant adoption of any new features and possible bugs without developer knowledge. The `@latest` wildcard should NEVER be used for production customer-facing applications. You have been warned.
+<!-- AURO-GENERATED-CONTENT:END -->
+
+## Install from CDN
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/bundleInstallDescription.md) -->
+<!-- The below content is automatically added from ../../docs/templates/bundleInstallDescription.md -->
+In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
+```html
+<script type="module "src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@2.0.0-beta.54/auro-input/+esm"></script>
+```
 <!-- AURO-GENERATED-CONTENT:END -->
 
-### Bundle example code
+## UI development browser support
+<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/browserSupport.md) -->
+For the most up to date information on [UI development browser support](https://auro.alaskaair.com/support/browsersSupport)
 
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/componentBundleUseModBrowsers.md) -->
-<!-- The below content is automatically added from ../../docs/templates/componentBundleUseModBrowsers.md -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.12.1/dist/tokens/CSSCustomProperties.css" />
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@5.1.2/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-input@2.0.0-beta.8/dist/auro-input__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-input use cases
-
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
 <!-- The below content is automatically added from ./docs/partials/useCases.md -->
 The `<auro-input>` element should be used in situations where users may:
@@ -102,65 +118,18 @@ The `<auro-input>` element should be used in situations where users may:
 * be filling out a form
 <!-- AURO-GENERATED-CONTENT:END -->
 
-## API Code Examples
-
-### Default auro-input
-
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
-<!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
-
-```html
-<auro-input bordered></auro-input>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-
-## Development
-
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/developmentDescription.md) -->
-In order to develop against this project, if you are not part of the core team, you will be required to fork the project prior to submitting a pull request.
+## Formkit development
 
-Please be sure to review the [contribution guidelines](https://auro.alaskaair.com/contributing) for this project. Please make sure to **pay special attention** to the **conventional commits** section of the document.
-
-<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/partials/developmentDescription.md) -->
+<!-- The below content is automatically added from ../../docs/partials/developmentDescription.md -->
 
-### Start development environment
-
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/localhost.md) -->
-Once the project has been cloned to your local resource and you have installed all the dependencies you will need to open a shell session to run the **dev server**.
-
-```shell
-$ npm run dev
-```
+### Filtering
 
-Open [localhost:8000](http://localhost:8000/)
+Running the `dev` command will open a `localhost` development server for all components in the monorepo at once.
 
-If running separate sessions is preferred, please run the following commands in individual terminal shells.
+To only develop a single component, use the `--filter` flag:
 
 ```shell
-$ npm run build:watch
-
-$ npm run serve
+npx turbo dev --filter=@aurodesignsystem/auro-input
 ```
-
-<!-- AURO-GENERATED-CONTENT:END -->
-
-### API generation
-
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/api.md) -->
-The custom element API file is generated in the build and committed back to the repo with a version change. If the API doc has changed without a version change, author's are to run `npm run build:api` to generate the doc and commit to version control.
-
-<!-- AURO-GENERATED-CONTENT:END -->
-
-### Testing
-
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/testing.md) -->
-Automated tests are required for every Auro component. See `.\test\auro-input.test.js` for the tests for this component. Run `npm test` to run the tests and check code coverage. Tests must pass and meet a certain coverage threshold to commit. See [the testing documentation](https://auro.alaskaair.com/support/tests) for more details.
-
-<!-- AURO-GENERATED-CONTENT:END -->
-
-### Bundled assets
-
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/bundles.md) -->
-Bundled assets are only generated in the remote and not merged back to this repo. To review and/or test a bundled asset locally, run `$ npm run bundler` to generate assets.
-
 <!-- AURO-GENERATED-CONTENT:END -->

package/components/input/demo/api.md

@@ -17,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.              |
@@ -47,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
 
@@ -127,7 +127,7 @@ Use the `disable` attribute to prevent the user from interacting with the input.
 <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 bordered type="month-day-year">
+  <auro-input disabled bordered type="date">
     <slot slot="label">Arrival date</slot>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
@@ -138,7 +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 bordered type="month-day-year">
+<auro-input disabled bordered type="date">
   <slot slot="label">Arrival date</slot>
 </auro-input>
 ```
@@ -261,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." bordered>
+  <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 -->
@@ -272,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." bordered>
+<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>
 ```
@@ -312,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." bordered>
+  <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 -->
@@ -323,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." bordered>
+<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>
 ```
@@ -541,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).
@@ -826,80 +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">
-  <!-- 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" bordered>
-    <slot slot="label">Arrival date</slot>
-  </auro-input>
+  <!-- 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" bordered>
-  <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
+
+Use the `format` attribute to set a custom phone number format.
 
 <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" bordered>
-    <slot slot="label">Arrival date</slot>
-  </auro-input>
+  <!-- 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" bordered>
-  <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
+
+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/monthFullYear.html) -->
-  <!-- The below content is automatically added from ../apiExamples/monthFullYear.html -->
-  <auro-input type="month-fullYear" bordered>
+  <!-- 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" bordered>
+<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">
   <!-- 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" bordered>
+  <auro-input type="date" format="yyyy/mm/dd" bordered>
     <slot slot="label">Arrival date</slot>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
@@ -910,74 +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" bordered>
+<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">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/month.html) -->
-  <!-- The below content is automatically added from ../apiExamples/month.html -->
-  <auro-input type="month" bordered>
-    <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" bordered>
-  <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">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/year.html) -->
-  <!-- The below content is automatically added from ../apiExamples/year.html -->
-  <auro-input type="year" bordered>
-    <slot slot="label">Year</slot>
+  <!-- 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" bordered>
-  <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">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/fullYear.html) -->
-  <!-- The below content is automatically added from ../apiExamples/fullYear.html -->
-  <auro-input type="fullYear" bordered>
-    <slot slot="label">Full Year</slot>
+  <!-- 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" bordered>
-  <slot slot="label">Full Year</slot>
+<auro-input type="date" format="dd" bordered>
+  <slot slot="label">Day</slot>
 </auro-input>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -1125,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});