@aurodesignsystem/auro-formkit 4.0.2 → 5.0.0

package/components/input/demo/api.md

@@ -5,13 +5,6 @@
 
 Generate unique names for dependency components.
 
-## Attributes
-
-| Attribute    | Type      | Description                    |
-|--------------|-----------|--------------------------------|
-| [bordered](#bordered)   | `Boolean` | Applies bordered UI variant.   |
-| [borderless](#borderless) | `Boolean` | Applies borderless UI variant. |
-
 ## Properties
 
 | Property                          | Attribute                         | Type      | Default     | Description                                      |
@@ -37,10 +30,11 @@ Generate unique names for dependency components.
 | [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.     |
+| [nested](#nested)                          | `nested`                          | `boolean` |             | Sets styles for nested operation - removes borders, hides help + error text, and<br />hides accents. |
 | [noValidate](#noValidate)                      | `noValidate`                      | `boolean` | false       | If set, disables auto-validation on blur.        |
 | [onDark](#onDark)                          | `onDark`                          | `boolean` | false       | Sets onDark styles on input.                     |
 | [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. |
+| [placeholder](#placeholder)                     | `placeholder`                     | `string`  |             | Define custom placeholder text.                  |
 | [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. |
@@ -52,6 +46,7 @@ Generate unique names for dependency components.
 | [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`. |
+| [simple](#simple)                          | `simple`                          | `boolean` |             | Simple makes the input render without a border.  |
 | [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`, `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. |
@@ -62,7 +57,9 @@ Generate unique names for dependency components.
 
 | Method     | Type                                   | Description                                      |
 |------------|----------------------------------------|--------------------------------------------------|
-| [reset](#reset)    | `(): void`                             | Resets component to initial state.               |
+| [clear](#clear)    | `(): void`                             | Clears the input value.                          |
+| [focus](#focus)    | `(): void`                             | Function to set element focus.                   |
+| [reset](#reset)    | `(): void`                             | Resets component to initial state, including resetting the touched state and validity. |
 | [validate](#validate) | `(force?: boolean \| undefined): void` | Validates value.<br /><br />**force**: Whether to force validation. |
 
 ## Events
@@ -75,18 +72,26 @@ Generate unique names for dependency components.
 
 ## Slots
 
-| Name       | Description                                   |
-|------------|-----------------------------------------------|
-| [helptext](#helptext) | Sets the help text displayed below the input. |
-| [label](#label)    | Sets the label text for the input.            |
+| Name                      | Description                                      |
+|---------------------------|--------------------------------------------------|
+| `ariaLabel.clear`         | Sets aria-label on clear button for screenreader to read |
+| `ariaLabel.password.hide` | Sets aria-label on password button to toggle off showing password |
+| `ariaLabel.password.show` | Sets aria-label on password button to toggle on showing password |
+| [displayValue](#displayValue)            | Allows custom HTML content to display in place of the value when the input is not focused. |
+| [helpText](#helpText)                | Sets the help text displayed below the input.    |
+| [label](#label)                   | Sets the label text for the input.               |
+| [optionalLabel](#optionalLabel)           | Allows overriding the optional display text "(optional)", which appears next to the label. |
 
 ## CSS Shadow Parts
 
 | Part            | Description                                      |
-|-----------------|--------------------------------------------------|
+|-----------------|--------------------------------------------------|
+| `accent-left`   | Use for customizing the style of the left accent element (e.g. padding, margin) |
+| `accent-right`  | Use for customizing the style of the right accent element (e.g. padding, margin) |
 | [accentIcon](#accentIcon)    | Use for customizing the style of the accentIcon element (e.g. credit card icon, calendar icon) |
 | [helpText](#helpText)      | Use for customizing the style of the helpText element |
 | [iconContainer](#iconContainer) | Use for customizing the style of the iconContainer (e.g. X icon for clearing input value) |
+| [input](#input)         | Use for customizing the style of the input element |
 | [label](#label)         | Use for customizing the style of the label element |
 | [wrapper](#wrapper)       | Use for customizing the style of the root element |
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -110,13 +115,20 @@ The default component supports the basic input `type="text"` structure. The `(op
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
   <!-- The below content is automatically added from ./../apiExamples/basic.html -->
-  <auro-input bordered></auro-input>
+  <auro-input>
+    <span slot="ariaLabel.clear">Clear All</span>
+    <span slot="label">Label</span>
+    <span slot="helpText">Help Text</span>
+  </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <div class="exampleWrapper--ondark" aria-hidden>
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDark.html) -->
   <!-- The below content is automatically added from ./../apiExamples/onDark.html -->
-  <auro-input onDark bordered></auro-input>
+  <auro-input ondark>
+    <span slot="label">Label</span>
+    <span slot="helpText">Help Text</span>
+  </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
@@ -125,14 +137,21 @@ The default component supports the basic input `type="text"` structure. The `(op
 <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
 
 ```html
-<auro-input bordered></auro-input>
+<auro-input>
+  <span slot="ariaLabel.clear">Clear All</span>
+  <span slot="label">Label</span>
+  <span slot="helpText">Help Text</span>
+</auro-input>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/onDark.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/onDark.html -->
 
 ```html
-<auro-input onDark bordered></auro-input>
+<auro-input ondark>
+  <span slot="label">Label</span>
+  <span slot="helpText">Help Text</span>
+</auro-input>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
@@ -145,16 +164,18 @@ 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="date">
-    <span slot="label">Arrival date</span>
+  <auro-input disabled type="date">
+    <span slot="label">Disabled</span>
+    <span slot="helpText">Help Text</span>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <div class="exampleWrapper--ondark" aria-hidden>
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkDisabled.html) -->
   <!-- The below content is automatically added from ./../apiExamples/onDarkDisabled.html -->
-  <auro-input onDark disabled bordered type="date">
+  <auro-input onDark disabled type="date">
     <span slot="label">Arrival date</span>
+    <span slot="helpText">Help Text</span>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -164,8 +185,9 @@ 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="date">
-  <span slot="label">Arrival date</span>
+<auro-input disabled type="date">
+  <span slot="label">Disabled</span>
+  <span slot="helpText">Help Text</span>
 </auro-input>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -173,8 +195,9 @@ Use the `disable` attribute to prevent the user from interacting with the input.
 <!-- The below code snippet is automatically added from ./../apiExamples/onDarkDisabled.html -->
 
 ```html
-<auro-input onDark disabled bordered type="date">
+<auro-input onDark disabled type="date">
   <span slot="label">Arrival date</span>
+  <span slot="helpText">Help Text</span>
 </auro-input>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -189,7 +212,10 @@ Set the input mode for the input.
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inputmode.html) -->
   <!-- The below content is automatically added from ./../apiExamples/inputmode.html -->
-  <auro-input bordered inputmode="tel" />
+  <auro-input inputmode="tel">
+    <span slot="label">Telephone</span>
+    <span slot="helpText">Help Text</span>
+  </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
@@ -198,7 +224,10 @@ Set the input mode for the input.
 <!-- The below code snippet is automatically added from ./../apiExamples/inputmode.html -->
 
 ```html
-<auro-input bordered inputmode="tel" />
+<auro-input inputmode="tel">
+  <span slot="label">Telephone</span>
+  <span slot="helpText">Help Text</span>
+</auro-input>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
@@ -209,9 +238,9 @@ Use the `placeholder` attribute to add a custom placeholder message within the e
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/placeholder.html) -->
   <!-- The below content is automatically added from ../apiExamples/placeholder.html -->
-  <auro-input placeholder="John Doe" bordered required>
+  <auro-input placeholder="John Doe" required>
     <span slot="label">Full name</span>
-    <span slot="helptext">Please enter your full name.</span>
+    <span slot="helpText">Please enter your full name.</span>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -221,9 +250,9 @@ 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 placeholder="John Doe" bordered required>
+<auro-input placeholder="John Doe" required>
   <span slot="label">Full name</span>
-  <span slot="helptext">Please enter your full name.</span>
+  <span slot="helpText">Please enter your full name.</span>
 </auro-input>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -235,9 +264,9 @@ Use the `value` attribute to programmatically set the value of the input.
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/programmaticValue.html) -->
   <!-- The below content is automatically added from ../apiExamples/programmaticValue.html -->
-  <auro-input value="Alaska Airlines is the best!" bordered>
+  <auro-input value="Alaska Airlines is the best!">
     <span slot="label">Name</span>
-    <span slot="helptext">Please enter your full name.</span>
+    <span slot="helpText">Please enter your full name.</span>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -247,9 +276,9 @@ Use the `value` attribute to programmatically set the value of the input.
 <!-- The below code snippet is automatically added from ../apiExamples/programmaticValue.html -->
 
 ```html
-<auro-input value="Alaska Airlines is the best!" bordered>
+<auro-input value="Alaska Airlines is the best!">
   <span slot="label">Name</span>
-  <span slot="helptext">Please enter your full name.</span>
+  <span slot="helpText">Please enter your full name.</span>
 </auro-input>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -267,9 +296,9 @@ Note: Setting the `value` to `undefined` will also reset the element.
   <auro-button id="setValidValueBtn">Set Value to Alaska</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>
+  <auro-input id="setProgrammaticValueExample" value="Press one of the buttons above!">
     <span slot="label">Name</span>
-    <span slot="helptext">Please enter your full name.</span>
+    <span slot="helpText">Please enter your full name.</span>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -282,9 +311,9 @@ Note: Setting the `value` to `undefined` will also reset the element.
 <auro-button id="setValidValueBtn">Set Value to Alaska</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>
+<auro-input id="setProgrammaticValueExample" value="Press one of the buttons above!">
   <span slot="label">Name</span>
-  <span slot="helptext">Please enter your full name.</span>
+  <span slot="helpText">Please enter your full name.</span>
 </auro-input>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -319,8 +348,9 @@ 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="date" 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.">
     <span slot="label">Choose a date</span>
+    <span slot="helpText">Help Text</span>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -330,8 +360,9 @@ The `setCustomValidityRangeOverflow` attribute may optionally be used in combina
 <!-- The below code snippet is automatically added from ../apiExamples/maxDate.html -->
 
 ```html
-<auro-input type="date" 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.">
   <span slot="label">Choose a date</span>
+  <span slot="helpText">Help Text</span>
 </auro-input>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -342,8 +373,9 @@ 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." bordered>
+  <auro-input type="number" max="10" setCustomValidityRangeOverflow="The selected value is above the defined maximum.">
     <span slot="label">Choose a number</span>
+    <span slot="helpText">Help Text</span>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -353,8 +385,9 @@ 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." bordered>
+<auro-input type="number" max="10" setCustomValidityRangeOverflow="The selected value is above the defined maximum.">
   <span slot="label">Choose a number</span>
+  <span slot="helpText">Help Text</span>
 </auro-input>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -370,8 +403,9 @@ 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="date" 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.">
     <span slot="label">Choose a date</span>
+    <span slot="helpText">Help Text</span>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -381,8 +415,9 @@ The `setCustomValidityRangeUnderflow` attribute may optionally be used in combin
 <!-- The below code snippet is automatically added from ../apiExamples/minDate.html -->
 
 ```html
-<auro-input type="date" 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.">
   <span slot="label">Choose a date</span>
+  <span slot="helpText">Help Text</span>
 </auro-input>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -393,8 +428,9 @@ 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." bordered>
+  <auro-input type="number" min="10" setCustomValidityRangeUnderflow="The selected value is below the defined minimum.">
     <span slot="label">Choose a number</span>
+    <span slot="helpText">Help Text</span>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -404,8 +440,9 @@ 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." bordered>
+<auro-input type="number" min="10" setCustomValidityRangeUnderflow="The selected value is below the defined minimum.">
   <span slot="label">Choose a number</span>
+  <span slot="helpText">Help Text</span>
 </auro-input>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -419,9 +456,9 @@ The `setCustomValidityTooLong` attribute may optionally be used in combination w
 <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>
+  <auro-input maxlength="12" setCustomValidityTooLong="Oops! There were too many characters entered." required>
     <span slot="label">Voucher Code</span>
-    <span slot="helptext">Please enter your 12 character voucher code.</span>
+    <span slot="helpText">Please enter your 12 character voucher code.</span>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -431,9 +468,9 @@ The `setCustomValidityTooLong` attribute may optionally be used in combination w
 <!-- 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>
+<auro-input maxlength="12" setCustomValidityTooLong="Oops! There were too many characters entered." required>
   <span slot="label">Voucher Code</span>
-  <span slot="helptext">Please enter your 12 character voucher code.</span>
+  <span slot="helpText">Please enter your 12 character voucher code.</span>
 </auro-input>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -447,9 +484,9 @@ The `setCustomValidityTooShort` attribute may optionally be used in combination
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/minLength.html) -->
   <!-- The below content is automatically added from ../apiExamples/minLength.html -->
-  <auro-input minlength="4" setCustomValidityTooShort="Please enter a full voucher code." bordered required>
+  <auro-input minlength="4" setCustomValidityTooShort="Please enter a full voucher code." required>
     <span slot="label">Voucher Code</span>
-    <span slot="helptext">Please enter your 4 character voucher code.</span>
+    <span slot="helpText">Please enter your 4 character voucher code.</span>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -459,9 +496,9 @@ The `setCustomValidityTooShort` attribute may optionally be used in combination
 <!-- The below code snippet is automatically added from ../apiExamples/minLength.html -->
 
 ```html
-<auro-input minlength="4" setCustomValidityTooShort="Please enter a full voucher code." bordered required>
+<auro-input minlength="4" setCustomValidityTooShort="Please enter a full voucher code." required>
   <span slot="label">Voucher Code</span>
-  <span slot="helptext">Please enter your 4 character voucher code.</span>
+  <span slot="helpText">Please enter your 4 character voucher code.</span>
 </auro-input>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -475,9 +512,9 @@ The `<auro-input>` component supports setting a custom validity message specific
 <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" bordered>
+  <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>
+    <span slot="helpText">Please enter a username.</span>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -487,9 +524,9 @@ 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" bordered>
+<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>
+  <span slot="helpText">Please enter a username.</span>
 </auro-input>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -506,9 +543,9 @@ In this example, the user is able to programmatically change the value of the in
   <auro-button id="setReadonlyValueBtn">Set Value to Auro Alaska</auro-button>
   <auro-button id="resetReadonlyValueBtn">Reset</auro-button>
   <br /><br />
-  <auro-input readonly bordered id="readonlyExample">
+  <auro-input readonly id="readonlyExample">
     <span slot="label">Name</span>
-    <span slot="helptext">Please enter your full name.</span>
+    <span slot="helpText">Please enter your full name.</span>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -521,9 +558,9 @@ In this example, the user is able to programmatically change the value of the in
 <auro-button id="setReadonlyValueBtn">Set Value to Auro Alaska</auro-button>
 <auro-button id="resetReadonlyValueBtn">Reset</auro-button>
 <br /><br />
-<auro-input readonly bordered id="readonlyExample">
+<auro-input readonly id="readonlyExample">
   <span slot="label">Name</span>
-  <span slot="helptext">Please enter your full name.</span>
+  <span slot="helpText">Please enter your full name.</span>
 </auro-input>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -553,9 +590,9 @@ Example use cases for auro-input support the `activeLabel` attribute. If set, th
 <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 bordered>
+  <auro-input activeLabel>
     <span slot="label">Address</span>
-    <span slot="helptext">Please enter your home address.</span>
+    <span slot="helpText">Please enter your home address.</span>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -565,9 +602,9 @@ 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 bordered>
+<auro-input activeLabel>
   <span slot="label">Address</span>
-  <span slot="helptext">Please enter your home address.</span>
+  <span slot="helpText">Please enter your home address.</span>
 </auro-input>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -579,9 +616,9 @@ For use cases where the field is `required`, but live validation is not wanted,
 <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 bordered>
+  <auro-input noValidate required>
     <span slot="label">Address</span>
-    <span slot="helptext">Please enter your home address.</span>
+    <span slot="helpText">Please enter your home address.</span>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -591,9 +628,9 @@ 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 bordered>
+<auro-input noValidate required>
   <span slot="label">Address</span>
-  <span slot="helptext">Please enter your home address.</span>
+  <span slot="helpText">Please enter your home address.</span>
 </auro-input>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -612,7 +649,10 @@ See [IMask](https://imask.js.org/) for more information on how to configure a ma
 <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-input format="47440000">
+    <span slot="label">Custom format</span>
+    <span slot="helpText">Format is: 47440000</span>
+  </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
@@ -621,7 +661,10 @@ See [IMask](https://imask.js.org/) for more information on how to configure a ma
 <!-- The below code snippet is automatically added from ../apiExamples/format.html -->
 
 ```html
-<auro-input bordered format="47440000"></auro-input>
+<auro-input format="47440000">
+  <span slot="label">Custom format</span>
+  <span slot="helpText">Format is: 47440000</span>
+</auro-input>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
@@ -640,9 +683,9 @@ When the validity check fails, the validityState equals `valueMissing`. The erro
 <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 bordered placeholder="John Doe">
+  <auro-input required placeholder="John Doe">
     <span slot="label">Full name</span>
-    <span slot="helptext">Please enter your full name.</span>
+    <span slot="helpText">Please enter your full name.</span>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -652,9 +695,37 @@ 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 bordered placeholder="John Doe">
+<auro-input required placeholder="John Doe">
+  <span slot="label">Full name</span>
+  <span slot="helpText">Please enter your full name.</span>
+</auro-input>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+### Custom optional label <a name="optionalLabel"></a>
+The `<auro-input>` supports an `optionalLabel` slot, where users can can override the default `(optional)` notification text.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/optionalLabel.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/optionalLabel.html -->
+  <auro-input placeholder="John Doe" bordered>
+    <span slot="label">Full name</span>
+    <span slot="optionalLabel" style="color: grey; font-size: small"> - optional</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/optionalLabel.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/optionalLabel.html -->
+
+```html
+<auro-input placeholder="John Doe" bordered>
   <span slot="label">Full name</span>
-  <span slot="helptext">Please enter your full name.</span>
+  <span slot="optionalLabel" style="color: grey; font-size: small"> - optional</span>
+  <span slot="helpText">Please enter your full name.</span>
 </auro-input>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -666,9 +737,9 @@ Use the `validateOnInput` attribute to enable live validation on the `input` eve
 <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 bordered required pattern="[a-zA-Z-.']+( +[a-zA-Z-.']+)+" setCustomValidityPatternMismatch="Full name requires two or more names with at least one space.">
+  <auro-input validateOnInput required pattern="[a-zA-Z-.']+( +[a-zA-Z-.']+)+" setCustomValidityPatternMismatch="Full name requires two or more names with at least one space.">
     <span slot="label">Full Name</span>
-    <span slot="helptext">Please enter your full name as it appears on the card.</span>
+    <span slot="helpText">Please enter your full name as it appears on the card.</span>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -678,9 +749,9 @@ 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 bordered required pattern="[a-zA-Z-.']+( +[a-zA-Z-.']+)+" setCustomValidityPatternMismatch="Full name requires two or more names with at least one space.">
+<auro-input validateOnInput required pattern="[a-zA-Z-.']+( +[a-zA-Z-.']+)+" setCustomValidityPatternMismatch="Full name requires two or more names with at least one space.">
   <span slot="label">Full Name</span>
-  <span slot="helptext">Please enter your full name as it appears on the card.</span>
+  <span slot="helpText">Please enter your full name as it appears on the card.</span>
 </auro-input>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -694,9 +765,9 @@ The `setCustomValidity` attribute can be used to set a custom string for all val
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/setCustomValidity.html) -->
   <!-- The below content is automatically added from ../apiExamples/setCustomValidity.html -->
-  <auro-input bordered required minlength="3" setCustomValidity="Sorry, please enter your first and last name (one space required).">
+  <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>
+    <span slot="helpText">Please enter your full name.</span>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -706,9 +777,9 @@ 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 bordered required minlength="3" setCustomValidity="Sorry, please enter your first and last name (one space required).">
+<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>
+  <span slot="helpText">Please enter your full name.</span>
 </auro-input>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -725,9 +796,9 @@ A custom error message can be set using the `error` attribute, or it can be used
   <auro-button id="setCustomErrorBtn">Set Custom Error</auro-button>
   <auro-button id="setCustomErrorClearBtn">Clear Custom Error</auro-button>
   <br /><br />
-  <auro-input id="setCustomErrorExample" error="Initial error attribute value" bordered>
+  <auro-input id="setCustomErrorExample" error="Initial error attribute value">
     <span slot="label">Name</span>
-    <span slot="helptext">Please enter your full name.</span>
+    <span slot="helpText">Please enter your full name.</span>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -740,9 +811,9 @@ A custom error message can be set using the `error` attribute, or it can be used
 <auro-button id="setCustomErrorBtn">Set Custom Error</auro-button>
 <auro-button id="setCustomErrorClearBtn">Clear Custom Error</auro-button>
 <br /><br />
-<auro-input id="setCustomErrorExample" error="Initial error attribute value" bordered>
+<auro-input id="setCustomErrorExample" error="Initial error attribute value">
   <span slot="label">Name</span>
-  <span slot="helptext">Please enter your full name.</span>
+  <span slot="helpText">Please enter your full name.</span>
 </auro-input>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -774,9 +845,9 @@ export function customError() {
   <auro-button onDark id="setCustomErrorBtnOnDark">Set Custom Error</auro-button>
   <auro-button onDark id="setCustomErrorClearBtnOnDark">Clear Custom Error</auro-button>
   <br /><br />
-  <auro-input onDark id="setCustomErrorExampleOnDark" error="Initial error attribute value" bordered>
+  <auro-input onDark id="setCustomErrorExampleOnDark" error="Initial error attribute value">
     <span slot="label">Name</span>
-    <span slot="helptext">Please enter your full name.</span>
+    <span slot="helpText">Please enter your full name.</span>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -789,9 +860,9 @@ export function customError() {
 <auro-button onDark id="setCustomErrorBtnOnDark">Set Custom Error</auro-button>
 <auro-button onDark id="setCustomErrorClearBtnOnDark">Clear Custom Error</auro-button>
 <br /><br />
-<auro-input onDark id="setCustomErrorExampleOnDark" error="Initial error attribute value" bordered>
+<auro-input onDark id="setCustomErrorExampleOnDark" error="Initial error attribute value">
   <span slot="label">Name</span>
-  <span slot="helptext">Please enter your full name.</span>
+  <span slot="helpText">Please enter your full name.</span>
 </auro-input>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -826,18 +897,21 @@ Default help text will be added to the input `type="password"` if custom help te
 <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 bordered>
+  <auro-input type="password" required>
+    <span slot="ariaLabel.clear">Clear All</span>
+    <span slot="ariaLabel.password.show">Show</span>
+    <span slot="ariaLabel.password.hide">Hide</span>
     <span slot="label">Password</span>
-    <span slot="helptext">Please enter a secure password.</span>
+    <span slot="helpText">Please enter a secure password.</span>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <div class="exampleWrapper--ondark" aria-hidden>
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/onDarkPassword.html) -->
   <!-- The below content is automatically added from ../apiExamples/onDarkPassword.html -->
-  <auro-input onDark type="password" required bordered>
+  <auro-input onDark type="password" required>
     <span slot="label">Password</span>
-    <span slot="helptext">Please enter a secure password.</span>
+    <span slot="helpText">Please enter a secure password.</span>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -847,9 +921,9 @@ Default help text will be added to the input `type="password"` if custom help te
 <!-- The below code snippet is automatically added from ../apiExamples/onDarkPassword.html -->
 
 ```html
-<auro-input onDark type="password" required bordered>
+<auro-input onDark type="password" required>
   <span slot="label">Password</span>
-  <span slot="helptext">Please enter a secure password.</span>
+  <span slot="helpText">Please enter a secure password.</span>
 </auro-input>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -864,9 +938,9 @@ Default help text will be added to the input `type="email"` if custom help text
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/email.html) -->
   <!-- The below content is automatically added from ../apiExamples/email.html -->
-  <auro-input type="email" bordered required>
+  <auro-input type="email" required>
     <span slot="label">Email address</span>
-    <span slot="helptext">Please enter your email address.</span>
+    <span slot="helpText">Please enter your email address.</span>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -876,9 +950,9 @@ 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 type="email" bordered required>
+<auro-input type="email" required>
   <span slot="label">Email address</span>
-  <span slot="helptext">Please enter your email address.</span>
+  <span slot="helpText">Please enter your email address.</span>
 </auro-input>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -893,9 +967,9 @@ This `number` input type should only be used for incremental numeric values, mea
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/number.html) -->
   <!-- The below content is automatically added from ../apiExamples/number.html -->
-  <auro-input type="number" bordered required>
+  <auro-input type="number" required>
     <span slot="label">Number of Passengers</span>
-    <span slot="helptext">Please enter the number of passengers.</span>
+    <span slot="helpText">Please enter the number of passengers.</span>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -905,9 +979,9 @@ 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 type="number" bordered required>
+<auro-input type="number" required>
   <span slot="label">Number of Passengers</span>
-  <span slot="helptext">Please enter the number of passengers.</span>
+  <span slot="helpText">Please enter the number of passengers.</span>
 </auro-input>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -922,9 +996,9 @@ Default help text will be added to the input `type="credit-card"` if custom help
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/creditCard.html) -->
   <!-- The below content is automatically added from ../apiExamples/creditCard.html -->
-  <auro-input type="credit-card" bordered required>
+  <auro-input type="credit-card" required>
     <span slot="label">Card number</span>
-    <span slot="helptext">Valid credit card numbers must include 16 digits (15 for Amex).</span>
+    <span slot="helpText">Valid credit card numbers must include 16 digits (15 for Amex).</span>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -934,9 +1008,9 @@ 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 type="credit-card" bordered required>
+<auro-input type="credit-card" required>
   <span slot="label">Card number</span>
-  <span slot="helptext">Valid credit card numbers must include 16 digits (15 for Amex).</span>
+  <span slot="helpText">Valid credit card numbers must include 16 digits (15 for Amex).</span>
 </auro-input>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -948,9 +1022,9 @@ Use the `type="credit-card"` and `icon` attributes for a credit card formatted i
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/creditCardIcon.html) -->
   <!-- The below content is automatically added from ../apiExamples/creditCardIcon.html -->
-  <auro-input icon type="credit-card" bordered required>
+  <auro-input icon type="credit-card" required>
     <span slot="label">Card number</span>
-    <span slot="helptext">Valid credit card numbers must include 16 digits (15 for Amex).</span>
+    <span slot="helpText">Valid credit card numbers must include 16 digits (15 for Amex).</span>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -961,9 +1035,9 @@ 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 icon type="credit-card" bordered required>
+<auro-input icon type="credit-card" required>
   <span slot="label">Card number</span>
-  <span slot="helptext">Valid credit card numbers must include 16 digits (15 for Amex).</span>
+  <span slot="helpText">Valid credit card numbers must include 16 digits (15 for Amex).</span>
 </auro-input>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -976,7 +1050,10 @@ Use the `type="tel"` attribute for a phone number formatted input. The default f
 <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-input type="tel">
+    <span slot="label">Telephone</span>
+    <span slot="helpText">Help Text</span>
+  </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
@@ -985,7 +1062,10 @@ Use the `type="tel"` attribute for a phone number formatted input. The default f
 <!-- The below code snippet is automatically added from ../apiExamples/tel.html -->
 
 ```html
-<auro-input type="tel" bordered></auro-input>
+<auro-input type="tel">
+  <span slot="label">Telephone</span>
+  <span slot="helpText">Help Text</span>
+</auro-input>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
@@ -997,7 +1077,10 @@ 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-input type="tel" format="+22 999 99 9999">
+    <span slot="label">Telephone</span>
+    <span slot="helpText">Help Text</span>
+  </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
@@ -1006,7 +1089,10 @@ Use the `format` attribute to set a custom phone number format.
 <!-- The below code snippet is automatically added from ../apiExamples/telFormat.html -->
 
 ```html
-<auro-input type="tel" format="+22 999 99 9999" bordered></auro-input>
+<auro-input type="tel" format="+22 999 99 9999">
+  <span slot="label">Telephone</span>
+  <span slot="helpText">Help Text</span>
+</auro-input>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
@@ -1018,8 +1104,9 @@ Use the `type="date"` attribute for a date formatted input. The default date for
 <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>
+  <auro-input type="date">
     <span slot="label">Arrival date</span>
+    <span slot="helpText">Help Text</span>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -1029,8 +1116,9 @@ Use the `type="date"` attribute for a date formatted input. The default date for
 <!-- The below code snippet is automatically added from ../apiExamples/monthDayYear.html -->
 
 ```html
-<auro-input type="date" bordered>
+<auro-input type="date">
   <span slot="label">Arrival date</span>
+  <span slot="helpText">Help Text</span>
 </auro-input>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -1043,8 +1131,9 @@ Use the `format` attribute to put together any combination of `mm`, `dd`, & `yyy
 <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="date" format="yyyy/mm/dd" bordered>
+  <auro-input type="date" format="yyyy/mm/dd">
     <span slot="label">Arrival date</span>
+    <span slot="helpText">Help Text</span>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -1054,8 +1143,9 @@ Use the `format` attribute to put together any combination of `mm`, `dd`, & `yyy
 <!-- The below code snippet is automatically added from ../apiExamples/yearMonthDay.html -->
 
 ```html
-<auro-input type="date" format="yyyy/mm/dd" bordered>
+<auro-input type="date" format="yyyy/mm/dd">
   <span slot="label">Arrival date</span>
+  <span slot="helpText">Help Text</span>
 </auro-input>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -1063,8 +1153,9 @@ Use the `format` attribute to put together any combination of `mm`, `dd`, & `yyy
 <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>
+  <auro-input type="date" format="mm/yy">
     <span slot="label">Expiration date</span>
+    <span slot="helpText">Help Text</span>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -1074,8 +1165,9 @@ Use the `format` attribute to put together any combination of `mm`, `dd`, & `yyy
 <!-- The below code snippet is automatically added from ../apiExamples/monthYear.html -->
 
 ```html
-<auro-input type="date" format="mm/yy" bordered>
+<auro-input type="date" format="mm/yy">
   <span slot="label">Expiration date</span>
+  <span slot="helpText">Help Text</span>
 </auro-input>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -1083,8 +1175,9 @@ Use the `format` attribute to put together any combination of `mm`, `dd`, & `yyy
 <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>
+  <auro-input type="date" format="dd">
     <span slot="label">Day</span>
+    <span slot="helpText">Help Text</span>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -1094,8 +1187,9 @@ Use the `format` attribute to put together any combination of `mm`, `dd`, & `yyy
 <!-- The below code snippet is automatically added from ../apiExamples/day.html -->
 
 ```html
-<auro-input type="date" format="dd" bordered>
+<auro-input type="date" format="dd">
   <span slot="label">Day</span>
+  <span slot="helpText">Help Text</span>
 </auro-input>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -1112,9 +1206,9 @@ Use the `reset()` method to reset the `<auro-input>`'s `value` and `validity` st
   <!-- The below content is automatically added from ../apiExamples/resetState.html -->
   <auro-button id="resetStateBtn">Reset</auro-button>
   <br /><br />
-  <auro-input id="resetStateExample" bordered minlength="12" value="Auro Team" setCustomValidityTooShort="Please enter your full name!">
+  <auro-input id="resetStateExample" minlength="12" value="Auro Team" setCustomValidityTooShort="Please enter your full name!">
     <span slot="label">Full Name</span>
-    <span slot="helptext">Please enter your full name.</span>
+    <span slot="helpText">Please enter your full name.</span>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -1126,9 +1220,9 @@ Use the `reset()` method to reset the `<auro-input>`'s `value` and `validity` st
 ```html
 <auro-button id="resetStateBtn">Reset</auro-button>
 <br /><br />
-<auro-input id="resetStateExample" bordered minlength="12" value="Auro Team" setCustomValidityTooShort="Please enter your full name!">
+<auro-input id="resetStateExample" minlength="12" value="Auro Team" setCustomValidityTooShort="Please enter your full name!">
   <span slot="label">Full Name</span>
-  <span slot="helptext">Please enter your full name.</span>
+  <span slot="helpText">Please enter your full name.</span>
 </auro-input>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -1154,12 +1248,14 @@ Example illustrates using a JavaScript function attached to an `auro-button` com
 <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>
+  <auro-input id="swapExampleLeft">
     <span slot="label">Left Input</span>
+    <span slot="helpText">Help Text</span>
   </auro-input>
   <auro-button id="swapExampleBtn">Swap Values</auro-button>
-  <auro-input id="swapExampleRight" bordered>
+  <auro-input id="swapExampleRight">
     <span slot="label">Right Input</span>
+    <span slot="helpText">Help Text</span>
   </auro-input>
   <style>
     #swapExampleWrapper {
@@ -1184,12 +1280,14 @@ Example illustrates using a JavaScript function attached to an `auro-button` com
 <!-- The below code snippet is automatically added from ../apiExamples/swapValue.html -->
 
 ```html
-<auro-input id="swapExampleLeft" bordered>
+<auro-input id="swapExampleLeft">
   <span slot="label">Left Input</span>
+  <span slot="helpText">Help Text</span>
 </auro-input>
 <auro-button id="swapExampleBtn">Swap Values</auro-button>
-<auro-input id="swapExampleRight" bordered>
+<auro-input id="swapExampleRight">
   <span slot="label">Right Input</span>
+  <span slot="helpText">Help Text</span>
 </auro-input>
 <style>
   #swapExampleWrapper {
@@ -1237,16 +1335,32 @@ The component may be restyled using the following code sample and changing the v
 <!-- The below code snippet is automatically added from ../src/styles/tokens.scss -->
 
 ```scss
-@import "@aurodesignsystem/design-tokens/dist/alaska/SCSSVariables--alaska";
-
-:host {
-  --ds-auro-input-border-color: var(--ds-basic-color-border-bold, #{$ds-basic-color-border-bold});
-  --ds-auro-input-container-color: var(--ds-basic-color-surface-default, #{$ds-basic-color-surface-default});
-  --ds-auro-input-caret-color: var(--ds-advanced-color-state-focused, #{$ds-advanced-color-state-focused});
-  --ds-auro-input-label-text-color: var(--ds-basic-color-texticon-muted, #{$ds-basic-color-texticon-muted});
-  --ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-default, #{$ds-basic-color-texticon-default});
-  --ds-auro-input-text-color: var(--ds-basic-color-texticon-default, #{$ds-basic-color-texticon-default});
-  --ds-auro-input-error-icon-color: var(--ds-basic-color-status-error, #{$ds-basic-color-status-error});
+/* stylelint-disable custom-property-empty-line-before */
+
+@use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v;
+
+:host(:not([ondark])) {
+  --ds-auro-input-border-color: var(--ds-basic-color-border-bold, #{v.$ds-basic-color-border-bold});
+  --ds-auro-input-container-color: var(--ds-basic-color-surface-default, #{v.$ds-basic-color-surface-default});
+  --ds-auro-input-caret-color: var(--ds-advanced-color-state-focused, #{v.$ds-advanced-color-state-focused});
+  --ds-auro-input-label-text-color: var(--ds-basic-color-texticon-muted, #{v.$ds-basic-color-texticon-muted});
+  --ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
+  --ds-auro-input-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
+  --ds-auro-input-error-icon-color: var(--ds-basic-color-status-error, #{v.$ds-basic-color-status-error});
+
+  --ds-auro-input-outline-color: transparent;
+}
+
+:host([ondark]) {
+  --ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #{v.$ds-basic-color-border-inverse});
+  --ds-auro-input-container-color: var(--ds-advanced-color-shared-background-inverse, #{v.$ds-advanced-color-shared-background-inverse});
+  --ds-auro-input-caret-color: var(--ds-advanced-color-state-focused-inverse, #{v.$ds-advanced-color-state-focused-inverse});
+  --ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #{v.$ds-basic-color-texticon-inverse-muted});
+  --ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-inverse, #{v.$ds-basic-color-texticon-inverse});
+  --ds-auro-input-text-color: var(--ds-basic-color-texticon-inverse, #{v.$ds-basic-color-texticon-inverse});
+  --ds-auro-input-error-icon-color: var(--ds-advanced-color-state-error-inverse, #{v.$ds-advanced-color-state-error-inverse});
+
+  --ds-auro-input-outline-color: transparent;
 }
 ```
 <!-- AURO-GENERATED-CONTENT:END -->