@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.3 → 0.0.0-pr624.31

package/components/input/demo/api.md

@@ -7,59 +7,61 @@ Generate unique names for dependency components.
 
 ## Properties
 
-| Property                          | Attribute                         | Modifiers | Type                                             | Default     | Description                                      |
-|-----------------------------------|-----------------------------------|-----------|--------------------------------------------------|-------------|--------------------------------------------------|
-| `a11yControls`                    | `a11yControls`                    |           | `string`                                         |             | The value for the aria-controls attribute.       |
-| `a11yExpanded`                    | `a11yExpanded`                    |           | `boolean`                                        |             | The value for the aria-expanded attribute.       |
-| `a11yRole`                        | `a11yRole`                        |           | `string`                                         |             | The value for the role attribute.                |
-| [activeLabel](#activeLabel)                     | `activeLabel`                     |           | `boolean`                                        | false       | If set, the label will remain fixed in the active position. |
-| [autocapitalize](#autocapitalize)                  | `autocapitalize`                  |           | `string`                                         |             | An enumerated attribute that controls whether and how text input is automatically capitalized as it is entered/edited by the user. [off/none, on/sentences, words, characters]. |
-| [autocomplete](#autocomplete)                    | `autocomplete`                    |           | `string`                                         |             | An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete="off"` is supported. |
-| [autocorrect](#autocorrect)                     | `autocorrect`                     |           | `string`                                         |             | When set to `off`, stops iOS from auto-correcting words when typed into a text box. |
-| [commonWrapperClasses](#commonWrapperClasses)            |                                   | readonly  | `{ wrapper: boolean; withValue: boolean \| "" \| undefined; hasFocus: boolean \| undefined; }` |             |                                                  |
-| [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`                                         |             | 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.                 |
-| [helpTextClasses](#helpTextClasses)                 |                                   | readonly  | `{ helpTextWrapper: boolean; leftIndent: boolean; rightIndent: boolean; }` |             |                                                  |
-| [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`                                         |             | The id global attribute defines an identifier (ID) which must be unique in the whole document. |
-| [inputmode](#inputmode)                       | `inputmode`                       |           | `string`                                         |             | Exposes inputmode attribute for input.           |
-| [lang](#lang)                            | `lang`                            |           | `string`                                         |             | Defines the language of an element.              |
-| [layout](#layout)                          |                                   |           | `string`                                         | "classic"   |                                                  |
-| [max](#max)                             | `max`                             |           | `string`                                         | "undefined" | The maximum value allowed. This only applies for inputs with a type of `number` and all date formats. |
-| [maxLength](#maxLength)                       | `maxLength`                       |           | `number`                                         | "undefined" | The maximum number of characters the user can enter into the text input. This must be an integer value `0` or higher. |
-| [min](#min)                             | `min`                             |           | `string`                                         | "undefined" | The minimum value allowed. This only applies for inputs with a type of `number` and all date formats. |
-| [minLength](#minLength)                       | `minLength`                       |           | `number`                                         | "undefined" | The minimum number of characters the user can enter into the text input. This must be a non-negative integer value smaller than or equal to the value specified by `maxlength`. |
-| [name](#name)                            | `name`                            |           | `string`                                         |             | Populates the `name` attribute on the input.     |
-| [noValidate](#noValidate)                      | `noValidate`                      |           | `boolean`                                        | false       | If set, disables auto-validation on blur.        |
-| [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. |
-| [readonly](#readonly)                        | `readonly`                        |           | `boolean`                                        |             | Makes the input read-only, but can be set programmatically. |
-| [required](#required)                        | `required`                        |           | `boolean`                                        | false       | Populates the `required` attribute on the input. Used for client-side validation. |
-| [setCustomValidity](#setCustomValidity)               | `setCustomValidity`               |           | `string`                                         |             | Sets a custom help text message to display for all validityStates. |
-| [setCustomValidityBadInput](#setCustomValidityBadInput)       | `setCustomValidityBadInput`       |           | `string`                                         |             | Custom help text message to display when validity = `badInput`. |
-| [setCustomValidityCustomError](#setCustomValidityCustomError)    | `setCustomValidityCustomError`    |           | `string`                                         |             | Custom help text message to display when validity = `customError`. |
-| [setCustomValidityForType](#setCustomValidityForType)        | `setCustomValidityForType`        |           | `string`                                         | "undefined" | Custom help text message to display for the declared element `type` and type validity fails. |
-| [setCustomValidityRangeOverflow](#setCustomValidityRangeOverflow)  | `setCustomValidityRangeOverflow`  |           | `string`                                         |             | Custom help text message to display when validity = `rangeOverflow`. |
-| [setCustomValidityRangeUnderflow](#setCustomValidityRangeUnderflow) | `setCustomValidityRangeUnderflow` |           | `string`                                         |             | Custom help text message to display when validity = `rangeUnderflow`. |
-| [setCustomValidityTooLong](#setCustomValidityTooLong)        | `setCustomValidityTooLong`        |           | `string`                                         |             | Custom help text message to display when validity = `tooLong`. |
-| [setCustomValidityTooShort](#setCustomValidityTooShort)       | `setCustomValidityTooShort`       |           | `string`                                         |             | Custom help text message to display when validity = `tooShort`. |
-| [setCustomValidityValueMissing](#setCustomValidityValueMissing)   | `setCustomValidityValueMissing`   |           | `string`                                         |             | Custom help text message to display when validity = `valueMissing`. |
-| [shape](#shape)                           |                                   |           | `string`                                         | "classic"   |                                                  |
-| [size](#size)                            |                                   |           | `string`                                         | "lg"        |                                                  |
-| [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. |
-| [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. |
+| Property                          | Attribute                         | Type      | Default     | Description                                      |
+|-----------------------------------|-----------------------------------|-----------|-------------|--------------------------------------------------|
+| `a11yControls`                    | `a11yControls`                    | `string`  |             | The value for the aria-controls attribute.       |
+| `a11yExpanded`                    | `a11yExpanded`                    | `boolean` |             | The value for the aria-expanded attribute.       |
+| `a11yRole`                        | `a11yRole`                        | `string`  |             | The value for the role attribute.                |
+| [activeLabel](#activeLabel)                     | `activeLabel`                     | `boolean` | false       | If set, the label will remain fixed in the active position. |
+| [autocapitalize](#autocapitalize)                  | `autocapitalize`                  | `string`  |             | An enumerated attribute that controls whether and how text input is automatically capitalized as it is entered/edited by the user. [off/none, on/sentences, words, characters]. |
+| [autocomplete](#autocomplete)                    | `autocomplete`                    | `string`  |             | An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete="off"` is supported. |
+| [autocorrect](#autocorrect)                     | `autocorrect`                     | `string`  |             | When set to `off`, stops iOS from auto-correcting words when typed into a text box. |
+| [customValidityTypeEmail](#customValidityTypeEmail)         | `customValidityTypeEmail`         | `string`  |             | Custom help text message for email type validity. |
+| [disabled](#disabled)                        | `disabled`                        | `boolean` | false       | If set, disables the input.                      |
+| [error](#error)                           | `error`                           | `string`  |             | 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.                 |
+| [hideInputVisually](#hideInputVisually)               | `hideInputVisually`               | `boolean` |             |                                                  |
+| [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`  |             | The id global attribute defines an identifier (ID) which must be unique in the whole document. |
+| [inputmode](#inputmode)                       | `inputmode`                       | `string`  |             | Exposes inputmode attribute for input.           |
+| [lang](#lang)                            | `lang`                            | `string`  |             | Defines the language of an element.              |
+| [layout](#layout)                          |                                   | `string`  | "classic"   |                                                  |
+| [max](#max)                             | `max`                             | `string`  | "undefined" | The maximum value allowed. This only applies for inputs with a type of `number` and all date formats. |
+| [maxLength](#maxLength)                       | `maxLength`                       | `number`  | "undefined" | The maximum number of characters the user can enter into the text input. This must be an integer value `0` or higher. |
+| [min](#min)                             | `min`                             | `string`  | "undefined" | The minimum value allowed. This only applies for inputs with a type of `number` and all date formats. |
+| [minLength](#minLength)                       | `minLength`                       | `number`  | "undefined" | The minimum number of characters the user can enter into the text input. This must be a non-negative integer value smaller than or equal to the value specified by `maxlength`. |
+| [name](#name)                            | `name`                            | `string`  |             | Populates the `name` attribute on the input.     |
+| [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. |
+| [readonly](#readonly)                        | `readonly`                        | `boolean` |             | Makes the input read-only, but can be set programmatically. |
+| [required](#required)                        | `required`                        | `boolean` | false       | Populates the `required` attribute on the input. Used for client-side validation. |
+| [setCustomValidity](#setCustomValidity)               | `setCustomValidity`               | `string`  |             | Sets a custom help text message to display for all validityStates. |
+| [setCustomValidityBadInput](#setCustomValidityBadInput)       | `setCustomValidityBadInput`       | `string`  |             | Custom help text message to display when validity = `badInput`. |
+| [setCustomValidityCustomError](#setCustomValidityCustomError)    | `setCustomValidityCustomError`    | `string`  |             | Custom help text message to display when validity = `customError`. |
+| [setCustomValidityForType](#setCustomValidityForType)        | `setCustomValidityForType`        | `string`  | "undefined" | Custom help text message to display for the declared element `type` and type validity fails. |
+| [setCustomValidityRangeOverflow](#setCustomValidityRangeOverflow)  | `setCustomValidityRangeOverflow`  | `string`  |             | Custom help text message to display when validity = `rangeOverflow`. |
+| [setCustomValidityRangeUnderflow](#setCustomValidityRangeUnderflow) | `setCustomValidityRangeUnderflow` | `string`  |             | Custom help text message to display when validity = `rangeUnderflow`. |
+| [setCustomValidityTooLong](#setCustomValidityTooLong)        | `setCustomValidityTooLong`        | `string`  |             | Custom help text message to display when validity = `tooLong`. |
+| [setCustomValidityTooShort](#setCustomValidityTooShort)       | `setCustomValidityTooShort`       | `string`  |             | Custom help text message to display when validity = `tooShort`. |
+| [setCustomValidityValueMissing](#setCustomValidityValueMissing)   | `setCustomValidityValueMissing`   | `string`  |             | Custom help text message to display when validity = `valueMissing`. |
+| [shape](#shape)                           |                                   | `string`  | "classic"   |                                                  |
+| [simple](#simple)                          | `simple`                          | `boolean` |             | Simple makes the input render without a border.  |
+| [size](#size)                            |                                   | `string`  | "lg"        |                                                  |
+| [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. |
+| [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                                      |
 |------------|----------------------------------------|--------------------------------------------------|
+| [focus](#focus)    | `(): void`                             | Function to set element focus.                   |
 | [reset](#reset)    | `(): void`                             | Resets component to initial state.               |
 | [validate](#validate) | `(force?: boolean \| undefined): void` | Validates value.<br /><br />**force**: Whether to force validation. |
 
@@ -73,18 +75,23 @@ 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                                      |
+|-----------------|--------------------------------------------------|
+| [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 -->
@@ -209,7 +216,7 @@ Use the `placeholder` attribute to add a custom placeholder message within the e
   <!-- The below content is automatically added from ../apiExamples/placeholder.html -->
   <auro-input placeholder="John Doe" bordered 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,7 +228,7 @@ Use the `placeholder` attribute to add a custom placeholder message within the e
 ```html
 <auro-input placeholder="John Doe" bordered 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,7 +242,7 @@ Use the `value` attribute to programmatically set the value of the input.
   <!-- The below content is automatically added from ../apiExamples/programmaticValue.html -->
   <auro-input value="Alaska Airlines is the best!" bordered>
     <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,7 +254,7 @@ Use the `value` attribute to programmatically set the value of the input.
 ```html
 <auro-input value="Alaska Airlines is the best!" bordered>
   <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,7 +274,7 @@ Note: Setting the `value` to `undefined` will also reset the element.
   <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>
+    <span slot="helpText">Please enter your full name.</span>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -282,7 +289,7 @@ Note: Setting the `value` to `undefined` will also reset the element.
 <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>
+  <span slot="helpText">Please enter your full name.</span>
 </auro-input>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -419,7 +426,7 @@ The `setCustomValidityTooLong` attribute may optionally be used in combination w
   <!-- The below content is automatically added from ../apiExamples/maxLength.html -->
   <auro-input maxlength="12" setCustomValidityTooLong="Oops! There were too many characters entered." bordered 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,7 +438,7 @@ The `setCustomValidityTooLong` attribute may optionally be used in combination w
 ```html
 <auro-input maxlength="12" setCustomValidityTooLong="Oops! There were too many characters entered." bordered 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,7 +454,7 @@ The `setCustomValidityTooShort` attribute may optionally be used in combination
   <!-- The below content is automatically added from ../apiExamples/minLength.html -->
   <auro-input minlength="4" setCustomValidityTooShort="Please enter a full voucher code." bordered 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,7 +466,7 @@ The `setCustomValidityTooShort` attribute may optionally be used in combination
 ```html
 <auro-input minlength="4" setCustomValidityTooShort="Please enter a full voucher code." bordered 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,7 +482,7 @@ The `<auro-input>` component supports setting a custom validity message specific
   <!-- 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>
     <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,7 +494,7 @@ The `<auro-input>` component supports setting a custom validity message specific
 ```html
 <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>
+  <span slot="helpText">Please enter a username.</span>
 </auro-input>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -506,7 +513,7 @@ In this example, the user is able to programmatically change the value of the in
   <br /><br />
   <auro-input readonly bordered 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,7 +528,7 @@ In this example, the user is able to programmatically change the value of the in
 <br /><br />
 <auro-input readonly bordered 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,7 +560,7 @@ Example use cases for auro-input support the `activeLabel` attribute. If set, th
   <!-- The below content is automatically added from ../apiExamples/activeLabel.html -->
   <auro-input activeLabel bordered>
     <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,7 +572,7 @@ Example use cases for auro-input support the `activeLabel` attribute. If set, th
 ```html
 <auro-input activeLabel bordered>
   <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,7 +586,7 @@ For use cases where the field is `required`, but live validation is not wanted,
   <!-- The below content is automatically added from ../apiExamples/noValidate.html -->
   <auro-input noValidate required bordered>
     <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,7 +598,7 @@ For use cases where the field is `required`, but live validation is not wanted,
 ```html
 <auro-input noValidate required bordered>
   <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 -->
@@ -640,7 +647,7 @@ When the validity check fails, the validityState equals `valueMissing`. The erro
   <!-- The below content is automatically added from ../apiExamples/required.html -->
   <auro-input required bordered 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,7 +659,35 @@ When the validity check fails, the validityState equals `valueMissing`. The erro
 ```html
 <auro-input required bordered 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 -->
+</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="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,7 +701,7 @@ Use the `validateOnInput` attribute to enable live validation on the `input` eve
   <!-- 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.">
     <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,7 +713,7 @@ Use the `validateOnInput` attribute to enable live validation on the `input` eve
 ```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.">
   <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,7 +729,7 @@ The `setCustomValidity` attribute can be used to set a custom string for all val
   <!-- 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).">
     <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,7 +741,7 @@ The `setCustomValidity` attribute can be used to set a custom string for all val
 ```html
 <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>
+  <span slot="helpText">Please enter your full name.</span>
 </auro-input>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -725,7 +760,7 @@ A custom error message can be set using the `error` attribute, or it can be used
   <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>
+    <span slot="helpText">Please enter your full name.</span>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -740,7 +775,7 @@ A custom error message can be set using the `error` attribute, or it can be used
 <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>
+  <span slot="helpText">Please enter your full name.</span>
 </auro-input>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -774,7 +809,7 @@ export function customError() {
   <br /><br />
   <auro-input onDark id="setCustomErrorExampleOnDark" error="Initial error attribute value" bordered>
     <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,7 +824,7 @@ export function customError() {
 <br /><br />
 <auro-input onDark id="setCustomErrorExampleOnDark" error="Initial error attribute value" bordered>
   <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,7 +861,7 @@ Default help text will be added to the input `type="password"` if custom help te
   <!-- The below content is automatically added from ../apiExamples/password.html -->
   <auro-input type="password" required bordered>
     <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>
@@ -835,7 +870,7 @@ Default help text will be added to the input `type="password"` if custom help te
   <!-- The below content is automatically added from ../apiExamples/onDarkPassword.html -->
   <auro-input onDark type="password" required bordered>
     <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,7 +882,7 @@ Default help text will be added to the input `type="password"` if custom help te
 ```html
 <auro-input onDark type="password" required bordered>
   <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,7 +899,7 @@ Default help text will be added to the input `type="email"` if custom help text
   <!-- The below content is automatically added from ../apiExamples/email.html -->
   <auro-input type="email" bordered 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,7 +911,7 @@ Default help text will be added to the input `type="email"` if custom help text
 ```html
 <auro-input type="email" bordered 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,7 +928,7 @@ This `number` input type should only be used for incremental numeric values, mea
   <!-- The below content is automatically added from ../apiExamples/number.html -->
   <auro-input type="number" bordered 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,7 +940,7 @@ This `number` input type should only be used for incremental numeric values, mea
 ```html
 <auro-input type="number" bordered 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,7 +957,7 @@ Default help text will be added to the input `type="credit-card"` if custom help
   <!-- The below content is automatically added from ../apiExamples/creditCard.html -->
   <auro-input type="credit-card" bordered 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,7 +969,7 @@ Default help text will be added to the input `type="credit-card"` if custom help
 ```html
 <auro-input type="credit-card" bordered 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,7 +983,7 @@ Use the `type="credit-card"` and `icon` attributes for a credit card formatted i
   <!-- The below content is automatically added from ../apiExamples/creditCardIcon.html -->
   <auro-input icon type="credit-card" bordered 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,7 +996,7 @@ Use the `type="credit-card"` and `icon` attributes for a credit card formatted i
 ```html
 <auro-input icon type="credit-card" bordered 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 -->
@@ -1112,7 +1147,7 @@ Use the `reset()` method to reset the `<auro-input>`'s `value` and `validity` st
   <br /><br />
   <auro-input id="resetStateExample" bordered 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,7 +1161,7 @@ Use the `reset()` method to reset the `<auro-input>`'s `value` and `validity` st
 <br /><br />
 <auro-input id="resetStateExample" bordered 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 -->
@@ -1235,7 +1270,9 @@ 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
-@use "@aurodesignsystem/design-tokens/dist/alaska/SCSSVariables--alaska" as v;
+/* stylelint-disable custom-property-empty-line-before */
+
+@use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v;
 
 $ds-basic-color-border-bold: #585e67;
 
@@ -1249,7 +1286,6 @@ $ds-basic-color-border-bold: #585e67;
   --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;
   --ds-auro-input-outline-color: transparent;
 }
 
@@ -1261,7 +1297,7 @@ $ds-basic-color-border-bold: #585e67;
   --ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse, #{v.$ds-basic-color-texticon-inverse});
   --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-error-icon-color: var(--ds-basic-color-status-error-subtle, #{v.$ds-basic-color-status-error-subtle});
 
   --ds-auro-input-outline-color: transparent;
 }