@aurodesignsystem/auro-formkit 2.0.0-beta.1 → 2.0.0-beta.3

package/components/input/demo/api.md

@@ -31,43 +31,41 @@ Generate unique names for dependency components.
 
 ## Properties
 
-| Property                          | Attribute                         | Type      | Default     | Description                                      |
-|-----------------------------------|-----------------------------------|-----------|-------------|--------------------------------------------------|
-| [activeLabel](#activeLabel)                     | `activeLabel`                     | `Boolean` | false       | If set, the label will remain fixed in the active position. |
-| [autocapitalize](#autocapitalize)                  | `autocapitalize`                  | `String`  |             | An enumerated attribute that controls whether and how text input is automatically capitalized as it is entered/edited by the user. [off/none, on/sentences, words, characters] |
-| [autocomplete](#autocomplete)                    | `autocomplete`                    | `String`  |             | An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete="off"` is supported. |
-| [autocorrect](#autocorrect)                     | `autocorrect`                     | `String`  |             | When set to `off`, stops iOS from auto correcting words when typed into a text box. |
-| [customValidityTypeEmail](#customValidityTypeEmail)         | `customValidityTypeEmail`         | `string`  |             |                                                  |
-| [disabled](#disabled)                        | `disabled`                        | `Boolean` | false       | If set, disables the input.                      |
-| [error](#error)                           | `error`                           | `String`  |             | When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value. |
-| [errorMessage](#errorMessage)                    | `errorMessage`                    | `String`  |             | Contains the help text message for the current validity error. |
-| [icon](#icon)                            | `icon`                            | `Boolean` | false       | If set, will render an icon inside the input to the left of the value. Support is limited to auro-input instances with credit card format. |
-| [id](#id)                              | `id`                              | `String`  |             | Sets the unique ID of the element.               |
-| [lang](#lang)                            | `lang`                            | `String`  |             | defines the language of an element.              |
-| [max](#max)                             | `max`                             | `String`  | "undefined" | The maximum value allowed. This only applies for inputs with a type of `number` and all date formats. |
-| [maxLength](#maxLength)                       | `maxLength`                       | `Number`  | "undefined" | The maximum number of characters the user can enter into the text input. This must be an integer value `0` or higher. |
-| [min](#min)                             | `min`                             | `String`  | "undefined" | The minimum value allowed. This only applies for inputs with a type of `number` and all date formats. |
-| [minLength](#minLength)                       | `minLength`                       | `Number`  | "undefined" | The minimum number of characters the user can enter into the text input. This must be an non-negative integer value smaller than or equal to the value specified by `maxlength`. |
-| [name](#name)                            | `name`                            | `String`  |             | Populates the `name` attribute on the input.     |
-| [noValidate](#noValidate)                      | `noValidate`                      | `Boolean` | false       | If set, disables auto-validation on blur.        |
-| [pattern](#pattern)                         | `pattern`                         | `String`  |             | Specifies a regular expression the form control's value should match. |
-| [placeholder](#placeholder)                     | `placeholder`                     | `String`  |             | Define custom placeholder text, only supported by date input formats. |
-| [readonly](#readonly)                        | `readonly`                        | `Boolean` |             | Makes the input read-only, but can be set programmatically. |
-| [required](#required)                        | `required`                        | `Boolean` | false       | Populates the `required` attribute on the input. Used for client-side validation. |
-| [setCustomValidity](#setCustomValidity)               | `setCustomValidity`               | `String`  |             | Sets a custom help text message to display for all validityStates. |
-| [setCustomValidityBadInput](#setCustomValidityBadInput)       | `setCustomValidityBadInput`       | `String`  |             | Custom help text message to display when validity = `badInput`. |
-| [setCustomValidityCustomError](#setCustomValidityCustomError)    | `setCustomValidityCustomError`    | `String`  |             | Custom help text message to display when validity = `customError`. |
-| [setCustomValidityForType](#setCustomValidityForType)        | `setCustomValidityForType`        | `String`  | "undefined" | Custom help text message to display for the declared element `type` and type validity fails. |
-| [setCustomValidityRangeOverflow](#setCustomValidityRangeOverflow)  | `setCustomValidityRangeOverflow`  | `String`  |             | Custom help text message to display when validity = `rangeOverflow`. |
-| [setCustomValidityRangeUnderflow](#setCustomValidityRangeUnderflow) | `setCustomValidityRangeUnderflow` | `String`  |             | Custom help text message to display when validity = `rangeUnderflow`. |
-| [setCustomValidityTooLong](#setCustomValidityTooLong)        | `setCustomValidityTooLong`        | `String`  |             | Custom help text message to display when validity = `tooLong`. |
-| [setCustomValidityTooShort](#setCustomValidityTooShort)       | `setCustomValidityTooShort`       | `String`  |             | Custom help text message to display when validity = `tooShort`. |
-| [setCustomValidityValueMissing](#setCustomValidityValueMissing)   | `setCustomValidityValueMissing`   | `String`  |             | Custom help text message to display when validity = `valueMissing`. |
-| [spellcheck](#spellcheck)                      | `spellcheck`                      | `String`  |             | An enumerated attribute defines whether the element may be checked for spelling errors. [true, false]. When set to `false` the attribute `autocorrect` is set to `off` and `autocapitalize` is set to `none`. |
-| [type](#type)                            | `type`                            | `String`  |             | Populates the `type` attribute on the input. Allowed values are `password`, `email`, `credit-card`, `month-day-year`, `month-year`, `year-month-day`  or `text`. If given value is not allowed or set, defaults to `text`. |
-| [validateOnInput](#validateOnInput)                 | `validateOnInput`                 | `Boolean` |             | Sets validation mode to re-eval with each input. |
-| [validity](#validity)                        | `validity`                        | `String`  |             | Specifies the `validityState` this element is in. |
-| [value](#value)                           | `value`                           | `String`  |             | Populates the `value` attribute on the input. Can also be read to retrieve the current value of the input. |
+| Property                           | Attribute                          | Type      | Default     | Description                                      |
+|------------------------------------|------------------------------------|-----------|-------------|--------------------------------------------------|
+| [activeLabel](#activeLabel)                      | `activeLabel`                      | `Boolean` | false       | If set, the label will remain fixed in the active position. |
+| [autocapitalize](#autocapitalize)                   | `autocapitalize`                   | `String`  |             | An enumerated attribute that controls whether and how text input is automatically capitalized as it is entered/edited by the user. [off/none, on/sentences, words, characters] |
+| [autocomplete](#autocomplete)                     | `autocomplete`                     | `String`  |             | An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete="off"` is supported. |
+| [autocorrect](#autocorrect)                      | `autocorrect`                      | `String`  |             | When set to `off`, stops iOS from auto correcting words when typed into a text box. |
+| [disabled](#disabled)                         | `disabled`                         | `Boolean` | false       | If set, disables the input.                      |
+| [error](#error)                            | `error`                            | `String`  |             | When defined, sets persistent validity to `customError` and sets the validation message to the attribute value. |
+| [icon](#icon)                             | `icon`                             | `Boolean` | false       | If set, will render an icon inside the input to the left of the value. Support is limited to auro-input instances with credit card format. |
+| [id](#id)                               | `id`                               | `String`  |             | Sets the unique ID of the element.               |
+| [lang](#lang)                             | `lang`                             | `String`  |             | defines the language of an element.              |
+| [max](#max)                              | `max`                              | `String`  | "undefined" | The maximum value allowed. This only applies for inputs with a type of `number` and all date formats. |
+| [maxLength](#maxLength)                        | `maxLength`                        | `Number`  | "undefined" | The maximum number of characters the user can enter into the text input. This must be an integer value `0` or higher. |
+| [min](#min)                              | `min`                              | `String`  | "undefined" | The minimum value allowed. This only applies for inputs with a type of `number` and all date formats. |
+| [minLength](#minLength)                        | `minLength`                        | `Number`  | "undefined" | The minimum number of characters the user can enter into the text input. This must be an non-negative integer value smaller than or equal to the value specified by `maxlength`. |
+| [name](#name)                             | `name`                             | `String`  |             | Populates the `name` attribute on the input.     |
+| [noValidate](#noValidate)                       | `noValidate`                       | `Boolean` | false       | If set, disables auto-validation on blur.        |
+| [pattern](#pattern)                          | `pattern`                          | `String`  |             | Specifies a regular expression the form control's value should match. |
+| [placeholder](#placeholder)                      | `placeholder`                      | `String`  |             | Define custom placeholder text, only supported by date input formats. |
+| [readonly](#readonly)                         | `readonly`                         | `Boolean` |             | Makes the input read-only, but can be set programmatically. |
+| [required](#required)                         | `required`                         | `Boolean` | false       | Populates the `required` attribute on the input. Used for client-side validation. |
+| [setCustomValidity](#setCustomValidity)                | `setCustomValidity`                | `String`  |             | Sets a custom help text message to display for all validity states. |
+| [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. |
+| [setCustomValidityPatternMismatch](#setCustomValidityPatternMismatch) | `setCustomValidityPatternMismatch` | `String`  |             | Custom help text message to display when validity = `patternMismatch`. |
+| [setCustomValidityRangeOverflow](#setCustomValidityRangeOverflow)   | `setCustomValidityRangeOverflow`   | `String`  |             | Custom help text message to display when validity = `rangeOverflow`. |
+| [setCustomValidityRangeUnderflow](#setCustomValidityRangeUnderflow)  | `setCustomValidityRangeUnderflow`  | `String`  |             | Custom help text message to display when validity = `rangeUnderflow`. |
+| [setCustomValidityTooLong](#setCustomValidityTooLong)         | `setCustomValidityTooLong`         | `String`  |             | Custom help text message to display when validity = `tooLong`. |
+| [setCustomValidityTooShort](#setCustomValidityTooShort)        | `setCustomValidityTooShort`        | `String`  |             | Custom help text message to display when validity = `tooShort`. |
+| [setCustomValidityValueMissing](#setCustomValidityValueMissing)    | `setCustomValidityValueMissing`    | `String`  |             | Custom help text message to display when validity = `valueMissing`. |
+| [spellcheck](#spellcheck)                       | `spellcheck`                       | `String`  |             | An enumerated attribute defines whether the element may be checked for spelling errors. [true, false]. When set to `false` the attribute `autocorrect` is set to `off` and `autocapitalize` is set to `none`. |
+| [type](#type)                             | `type`                             | `String`  |             | Populates the `type` attribute on the input. Allowed values are `password`, `email`, `credit-card`, `month-day-year`, `month-year`, `year-month-day`  or `text`. If given value is not allowed or set, defaults to `text`. |
+| [validateOnInput](#validateOnInput)                  | `validateOnInput`                  | `Boolean` |             | Sets validation mode to re-eval with each input. |
+| [validity](#validity)                         | `validity`                         | `String`  |             | Specifies the `validityState` this element is in. |
+| [value](#value)                            | `value`                            | `String`  |             | Populates the `value` attribute on the input. Can also be read to retrieve the current value of the input. |
 
 ## Methods
 
@@ -329,42 +327,6 @@ The `setCustomValidityRangeOverflow` attribute may optionally be used in combina
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-#### Max Length <a name="maxLength"></a>
-Use the `maxlength` attribute to control the length of the input entered.
-
-The `setCustomValidityTooLong` attribute may optionally be used in combination with the `maxLength` attribute to define custom help text used when the length of the input is too long.
-
-<div class="exampleWrapper exampleWrapper--flex">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/maxLength.html) -->
-  <!-- The below content is automatically added from ../apiExamples/maxLength.html -->
-  <auro-input required maxlength="12" setCustomValidityTooLong="Oops! There were too many characters entered.">
-    <slot slot="label">Voucher Code</slot>
-    <slot slot="helptext">Please enter your 12 character voucher code.</slot>
-  </auro-input>
-  <auro-input bordered required maxlength="12" setCustomValidityTooLong="Oops! There were too many characters entered.">
-    <slot slot="label">Voucher Code</slot>
-    <slot slot="helptext">Please enter your 12 character voucher code.</slot>
-  </auro-input>
-  <!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/maxLength.html) -->
-<!-- The below code snippet is automatically added from ../apiExamples/maxLength.html -->
-
-```html
-<auro-input required maxlength="12" setCustomValidityTooLong="Oops! There were too many characters entered.">
-  <slot slot="label">Voucher Code</slot>
-  <slot slot="helptext">Please enter your 12 character voucher code.</slot>
-</auro-input>
-<auro-input bordered required maxlength="12" setCustomValidityTooLong="Oops! There were too many characters entered.">
-  <slot slot="label">Voucher Code</slot>
-  <slot slot="helptext">Please enter your 12 character voucher code.</slot>
-</auro-input>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
 ### Min <a name="min"></a>
 Use the `min` attribute to define a minimum value used during validation. The attribute will only apply when `<auro-input>` also has a `type` attribute for `number` or any date format.
 
@@ -416,6 +378,42 @@ The `setCustomValidityRangeUnderflow` attribute may optionally be used in combin
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
+### Max Length <a name="maxLength"></a>
+Use the `maxlength` attribute to control the length of the input entered.
+
+The `setCustomValidityTooLong` attribute may optionally be used in combination with the `maxLength` attribute to define custom help text used when the length of the input is too long.
+
+<div class="exampleWrapper exampleWrapper--flex">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/maxLength.html) -->
+  <!-- The below content is automatically added from ../apiExamples/maxLength.html -->
+  <auro-input required maxlength="12" setCustomValidityTooLong="Oops! There were too many characters entered.">
+    <slot slot="label">Voucher Code</slot>
+    <slot slot="helptext">Please enter your 12 character voucher code.</slot>
+  </auro-input>
+  <auro-input bordered required maxlength="12" setCustomValidityTooLong="Oops! There were too many characters entered.">
+    <slot slot="label">Voucher Code</slot>
+    <slot slot="helptext">Please enter your 12 character voucher code.</slot>
+  </auro-input>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/maxLength.html) -->
+<!-- The below code snippet is automatically added from ../apiExamples/maxLength.html -->
+
+```html
+<auro-input required maxlength="12" setCustomValidityTooLong="Oops! There were too many characters entered.">
+  <slot slot="label">Voucher Code</slot>
+  <slot slot="helptext">Please enter your 12 character voucher code.</slot>
+</auro-input>
+<auro-input bordered required maxlength="12" setCustomValidityTooLong="Oops! There were too many characters entered.">
+  <slot slot="label">Voucher Code</slot>
+  <slot slot="helptext">Please enter your 12 character voucher code.</slot>
+</auro-input>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
 ### Min Length <a name="minLength"></a>
 Use the `minlength` attribute to control the length of the input entered.
 
@@ -455,16 +453,16 @@ The `setCustomValidityTooShort` attribute may optionally be used in combination
 ### Pattern <a name="pattern"></a>
 Use the `pattern` attribute to set custom input validation. This example also uses the `spellcheck` attribute set to `false` which in turn sets `autocorrect` to `off` and `autocapitalize` to `none`. Additionally the `maxlength` attribute sets the maximum length of characters that can be entered.
 
-The `<auro-input>` component supports setting a custom validity message specific to the pattern validation by using the `setCustomValidityBadInput` attribute.
+The `<auro-input>` component supports setting a custom validity message specific to the pattern validation by using the `setCustomValidityPatternMismatch` attribute.
 
 <div class="exampleWrapper exampleWrapper--flex">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/pattern.html) -->
   <!-- The below content is automatically added from ../apiExamples/pattern.html -->
-  <auro-input pattern="[a-z]{1,15}" spellcheck="false" setCustomValidityBadInput="Only contain lowercase letters w/no spaces">
+  <auro-input pattern="[a-z]{1,15}" spellcheck="false" setCustomValidityPatternMismatch="Only contain lowercase letters w/no spaces">
     <span slot="label">Username</span>
     <span slot="helptext">Please enter a username.</span>
   </auro-input>
-  <auro-input bordered pattern="[a-z]{1,15}" spellcheck="false" setCustomValidityBadInput="Only contain lowercase letters w/no spaces">
+  <auro-input bordered pattern="[a-z]{1,15}" spellcheck="false" setCustomValidityPatternMismatch="Only contain lowercase letters w/no spaces">
     <span slot="label">Username</span>
     <span slot="helptext">Please enter a username.</span>
   </auro-input>
@@ -476,11 +474,11 @@ The `<auro-input>` component supports setting a custom validity message specific
 <!-- The below code snippet is automatically added from ../apiExamples/pattern.html -->
 
 ```html
-<auro-input pattern="[a-z]{1,15}" spellcheck="false" setCustomValidityBadInput="Only contain lowercase letters w/no spaces">
+<auro-input pattern="[a-z]{1,15}" spellcheck="false" setCustomValidityPatternMismatch="Only contain lowercase letters w/no spaces">
   <span slot="label">Username</span>
   <span slot="helptext">Please enter a username.</span>
 </auro-input>
-<auro-input bordered pattern="[a-z]{1,15}" spellcheck="false" setCustomValidityBadInput="Only contain lowercase letters w/no spaces">
+<auro-input bordered pattern="[a-z]{1,15}" spellcheck="false" setCustomValidityPatternMismatch="Only contain lowercase letters w/no spaces">
   <span slot="label">Username</span>
   <span slot="helptext">Please enter a username.</span>
 </auro-input>
@@ -641,7 +639,7 @@ The `<auro-input>` component follows the HTML5 input `validity` and `validitySta
 ### Required <a name="required"></a>
 When present, the `required` attribute specifies that an input field must be filled out before submitting the form.
 
-When the validity check fails the validityState equals `valueMissing`. The error message for the `valueMissing` validityState can be changed to a custom string using the `setCustomValidityValueMissing`.
+When the validity check fails, the validityState equals `valueMissing`. The error message for the `valueMissing` validityState can be changed to a custom string using the `setCustomValidityValueMissing`.
 
 <div class="exampleWrapper exampleWrapper--flex">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/required.html) -->
@@ -678,11 +676,11 @@ Use the `validateOnInput` attribute to enable live validation on the `input` eve
 <div class="exampleWrapper exampleWrapper--flex">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/validateOnInput.html) -->
   <!-- The below content is automatically added from ../apiExamples/validateOnInput.html -->
-  <auro-input validateOnInput required pattern="[a-zA-Z-.']+( +[a-zA-Z-.']+)+" setCustomValidityBadInput="Full name requires two or more names with at least one space.">
+  <auro-input validateOnInput required pattern="[a-zA-Z-.']+( +[a-zA-Z-.']+)+" setCustomValidityPatternMismatch="Full name requires two or more names with at least one space.">
     <span slot="label">Full Name</span>
     <span slot="helptext">Please enter your full name as it appears on the card.</span>
   </auro-input>
-  <auro-input validateOnInput bordered required pattern="[a-zA-Z-.']+( +[a-zA-Z-.']+)+" setCustomValidityBadInput="Full name requires two or more names with at least one space.">
+  <auro-input validateOnInput bordered required pattern="[a-zA-Z-.']+( +[a-zA-Z-.']+)+" setCustomValidityPatternMismatch="Full name requires two or more names with at least one space.">
     <span slot="label">Full Name</span>
     <span slot="helptext">Please enter your full name as it appears on the card.</span>
   </auro-input>
@@ -694,11 +692,11 @@ Use the `validateOnInput` attribute to enable live validation on the `input` eve
 <!-- The below code snippet is automatically added from ../apiExamples/validateOnInput.html -->
 
 ```html
-<auro-input validateOnInput required pattern="[a-zA-Z-.']+( +[a-zA-Z-.']+)+" setCustomValidityBadInput="Full name requires two or more names with at least one space.">
+<auro-input validateOnInput required pattern="[a-zA-Z-.']+( +[a-zA-Z-.']+)+" setCustomValidityPatternMismatch="Full name requires two or more names with at least one space.">
   <span slot="label">Full Name</span>
   <span slot="helptext">Please enter your full name as it appears on the card.</span>
 </auro-input>
-<auro-input validateOnInput bordered required pattern="[a-zA-Z-.']+( +[a-zA-Z-.']+)+" setCustomValidityBadInput="Full name requires two or more names with at least one space.">
+<auro-input validateOnInput bordered required pattern="[a-zA-Z-.']+( +[a-zA-Z-.']+)+" setCustomValidityPatternMismatch="Full name requires two or more names with at least one space.">
   <span slot="label">Full Name</span>
   <span slot="helptext">Please enter your full name as it appears on the card.</span>
 </auro-input>
@@ -745,6 +743,8 @@ The `setCustomValidity` attribute can be used to set a custom string for all val
 ### Error <a name="error"></a>
 Use the `error` attribute to apply a persistent custom error that supersedes the HTML5 validation logic.
 
+A custom error message can be set using the `error` attribute, or it can be used in conjuction with the `setCustomValidityCustomError` attribute.
+
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/error.html) -->
   <!-- The below content is automatically added from ../apiExamples/error.html -->

package/components/input/demo/api.min.js

@@ -245,7 +245,7 @@ const t=globalThis,e$1=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShad
  * SPDX-License-Identifier: BSD-3-Clause
  */class r extends b{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const s=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=B(s,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1);}render(){return T}}r._$litElement$=!0,r["finalized"]=!0,globalThis.litElementHydrateSupport?.({LitElement:r});const i=globalThis.litElementPolyfillSupport;i?.({LitElement:r});(globalThis.litElementVersions??=[]).push("4.1.1");
 
-var styleCss$3 = i$2`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.typeIcon{display:flex;flex-direction:row;align-items:center}.typeIcon [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([bordered]) .notificationIcons{align-items:center}.notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}.alertNotification{width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem))}.clearBtn{width:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));opacity:0;pointer-events:none}:host .wrapper:hover .clearBtn,:host .wrapper:focus-within .clearBtn{opacity:1;pointer-events:auto}.passwordBtn{width:calc(var(--ds-size-300, 1.5rem));height:calc(var(--ds-size-300, 1.5rem))}.notificationBtn{display:block;width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);padding:0;border:0;background:unset;cursor:pointer}.notificationBtn [auro-icon]{display:block;height:var(--ds-size-300, 1.5rem);--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}.notificationBtn [auro-icon][hidden]{display:none}:host(:not([bordered])) .typeIcon,:host(:not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}:host(:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{overflow:hidden;width:0;height:0;padding:0;margin:0;visibility:hidden}.inputElement-helpText{margin:var(--ds-size-50, 0.25rem) 0;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-size-200, 1rem)}input{border:unset}.wrapper{position:relative;overflow:hidden;border-style:solid}:host(:not([bordered],[borderless])) .wrapper{border-width:1px 0}:host([bordered]) .wrapper{border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}:host(:not([borderless])) .wrapper:focus-within:before{position:absolute;display:block;border-bottom-width:1px;border-bottom-style:solid;content:"";inset:0;pointer-events:none}:host([validity]:not([validity=valid])) .wrapper:before{border-bottom:0}label{position:absolute;overflow:hidden;pointer-events:none;text-overflow:ellipsis;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:nowrap}:host(:not([bordered])) label{top:calc(100% - var(--ds-size-25, 0.125rem));transform:translateY(-100%)}:host(:not([bordered])) label.withIcon{left:var(--ds-size-400, 2rem)}:host([bordered]) label{top:50%;transform:translateY(-50%)}:host([bordered]) label.withIcon{left:var(--ds-size-500, 2.5rem)}:host([bordered]) label:not(label.withIcon){left:var(--ds-size-100, 0.5rem)}:host .wrapper:focus-within label{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host label.withValue{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host([activeLabel]) .wrapper label{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host{--size-lgsm: 1.875rem;--size-xlsm: 2.75rem;--size-mdxxs: 1.2rem;position:relative;display:block}.wrapper{display:flex;flex-direction:row}.main{display:flex;flex-direction:row;position:relative;flex:1}input{position:relative;overflow:hidden;min-height:calc(var(--ds-size-700, 3.5rem) + var(--ds-size-25, 0.125rem));max-height:calc(var(--ds-size-700, 3.5rem) + var(--ds-size-25, 0.125rem));flex:1;padding:var(--ds-size-400, 2rem) 0 var(--ds-size-50, 0.25rem);margin:0;font-family:var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);font-size:var(--ds-size-200, 1rem);outline:none;text-overflow:ellipsis;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:nowrap}input::-ms-reveal,input::-ms-clear{display:none}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}input[type=number]{-moz-appearance:textfield;appearance:textfield}input:disabled{background:none;pointer-events:none}:host([bordered]) input{padding:var(--ds-size-400, 2rem) 0 var(--ds-size-100, 0.5rem)}`;
+var styleCss$3 = i$2`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.typeIcon{display:flex;flex-direction:row;align-items:center}.typeIcon [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([bordered]) .notificationIcons{align-items:center}.notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}.alertNotification{width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem))}.passwordBtn{width:calc(var(--ds-size-300, 1.5rem));height:calc(var(--ds-size-300, 1.5rem))}.notificationBtn{display:block;width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);padding:0;border:0;background:unset;cursor:pointer}.notificationBtn [auro-icon]{display:block;height:var(--ds-size-300, 1.5rem);--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}.notificationBtn [auro-icon][hidden]{display:none}:host(:not([bordered])) .typeIcon,:host(:not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}.clearBtn{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);overflow:hidden;width:0;opacity:0}:host .wrapper:hover .clearBtn,:host .wrapper:focus-within .clearBtn{width:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));opacity:1}:host(:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{overflow:hidden;width:0;height:0;padding:0;margin:0;visibility:hidden}.inputElement-helpText{margin:var(--ds-size-50, 0.25rem) 0;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-size-200, 1rem)}input{border:unset}.wrapper{position:relative;overflow:hidden;border-style:solid}:host(:not([bordered],[borderless])) .wrapper{border-width:1px 0}:host([bordered]) .wrapper{border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}:host(:not([borderless])) .wrapper:focus-within:before{position:absolute;display:block;border-bottom-width:1px;border-bottom-style:solid;content:"";inset:0;pointer-events:none}:host([validity]:not([validity=valid])) .wrapper:before{border-bottom:0}label{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);position:absolute;overflow:hidden;pointer-events:none;text-overflow:ellipsis;white-space:nowrap}:host(:not([bordered])) label{top:calc(100% - var(--ds-size-25, 0.125rem));transform:translateY(-100%)}:host(:not([bordered])) label.withIcon{left:var(--ds-size-400, 2rem)}:host([bordered]) label{top:50%;transform:translateY(-50%)}:host([bordered]) label.withIcon{left:var(--ds-size-500, 2.5rem)}:host([bordered]) label:not(label.withIcon){left:var(--ds-size-100, 0.5rem)}:host .wrapper:focus-within label{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host label.withValue{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host([activeLabel]) .wrapper label{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host{position:relative;display:block}.wrapper{display:flex;flex-direction:row}.main{display:flex;flex-direction:row;position:relative;flex:1}input{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);position:relative;overflow:hidden;min-height:calc(var(--ds-size-700, 3.5rem) + var(--ds-size-25, 0.125rem));max-height:calc(var(--ds-size-700, 3.5rem) + var(--ds-size-25, 0.125rem));flex:1;padding:var(--ds-size-400, 2rem) 0 var(--ds-size-50, 0.25rem);margin:0;font-family:var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);font-size:var(--ds-size-200, 1rem);outline:none;text-overflow:ellipsis;white-space:nowrap}input::-ms-reveal,input::-ms-clear{display:none}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}input[type=number]{-moz-appearance:textfield;appearance:textfield}input:disabled{background:none;pointer-events:none}:host([bordered]) input{padding:var(--ds-size-400, 2rem) 0 var(--ds-size-100, 0.5rem)}`;
 
 var colorCss$3 = i$2`.wrapper{border-color:transparent}.inputElement-helpText{color:var(--ds-auro-input-help-text-color)}input{background-color:transparent;caret-color:var(--ds-auro-input-caret-color);color:var(--ds-auro-input-text-color)}input::placeholder{color:transparent}input:focus::placeholder{color:var(--ds-auro-input-placeholder-text-color)}input:disabled{--ds-auro-input-input-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}label{color:var(--ds-auro-input-label-text-color)}:host(:not([bordered],[borderless])) .wrapper{border-bottom-color:var(--ds-auro-input-border-color)}:host([bordered]) .wrapper{border-color:var(--ds-auro-input-border-color);background-color:var(--ds-auro-input-container-color)}:host([bordered]) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host(:not([borderless])) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-color-border-ui-focus-default, #2c67b5)}:host(:not([borderless])) .wrapper:focus-within:before{border-bottom-color:transparent}:host([validity]:not([validity=valid])){--ds-auro-input-border-color: var(--ds-color-border-error-default, #cc1816);--ds-auro-input-help-text-color: var(--ds-color-text-error-default, #cc1816)}:host([validity]:not([validity=valid])[bordered]) .wrapper{--ds-auro-input-border-color: var(--ds-color-border-error-default, #cc1816);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([disabled]){--ds-auro-input-border-color: var(--ds-color-border-ui-disabled-default, #adadad);--ds-auro-input-label-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}`;
 
@@ -1922,20 +1922,20 @@ class AuroFormValidation {
       const pattern = new RegExp(`^${elem.pattern}$`, 'u');
 
       if (!pattern.test(elem.value)) {
-        elem.validity = 'badInput';
-        elem.setCustomValidity = elem.setCustomValidityBadInput || '';
+        elem.validity = 'patternMismatch';
+        elem.errorMessage = elem.setCustomValidityPatternMismatch || elem.setCustomValidity || '';
       }
     }
 
     // Length > 0 is required to prevent the error message from showing when the input is empty
     if (elem.value?.length > 0 && elem.value?.length < elem.minLength) {
       elem.validity = 'tooShort';
-      elem.setCustomValidity = elem.setCustomValidityTooShort || '';
+      elem.errorMessage = elem.setCustomValidityTooShort || elem.setCustomValidity || '';
     }
     
     if (elem.value?.length > elem.maxLength) {
       elem.validity = 'tooLong';
-      elem.setCustomValidity = elem.setCustomValidityTooLong || '';
+      elem.errorMessage = elem.setCustomValidityTooLong || elem.setCustomValidity || '';
     }
   }
 
@@ -1951,33 +1951,32 @@ class AuroFormValidation {
         const emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/; // eslint-disable-line require-unicode-regexp
 
         if (!elem.value.match(emailRegex)) {
-          elem.validity = 'badInput';
-          elem.setCustomValidity = elem.setCustomValidityForType || '';
+          elem.validity = 'patternMismatch';
+          elem.errorMessage = elem.setCustomValidityForType || elem.setCustomValidity || '';
         }
       } else if (elem.type === 'credit-card') {
         if (elem.value.length > 0 && elem.value.length < elem.validationCCLength) {
           elem.validity = 'tooShort';
-          elem.setCustomValidity = elem.setCustomValidityForType || '';
+          elem.errorMessage = elem.setCustomValidityForType || elem.setCustomValidity || '';
         }
       } else if (elem.type === 'number') {
         if (elem.max !== undefined && Number(elem.max) < Number(elem.value)) {
           elem.validity = 'rangeOverflow';
-          elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeOverflow') || '';
+          elem.errorMessage = elem.setCustomValidityRangeOverflow || elem.setCustomValidity || '';
         }
 
-        if (elem.min !== undefined && Number(elem.min) > Number(elem.value)) {
+        if (elem.min !== undefined && elem.value?.length > 0 && Number(elem.min) > Number(elem.value)) {
           elem.validity = 'rangeUnderflow';
-          elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeUnderflow') || '';
+          elem.errorMessage = elem.setCustomValidityRangeUnderflow || elem.setCustomValidity || '';
         }
-
       } else if (elem.type === 'month-day-year' ||
                  elem.type === 'month-year' ||
                  elem.type === 'month-fullYear' ||
                  elem.type === 'year-month-day'
       ) {
-        if (elem.value && elem.value.length > 0 && elem.value.length < elem.dateStrLength) {
+        if (elem.value?.length > 0 && elem.value.length < elem.dateStrLength) {
           elem.validity = 'tooShort';
-          elem.setCustomValidity = elem.setCustomValidityForType || '';
+          elem.errorMessage = elem.setCustomValidityForType || elem.setCustomValidity || '';
         } else {
           const valueDate = new Date(elem.value);
 
@@ -1987,7 +1986,7 @@ class AuroFormValidation {
 
             if (valueDate > maxDate) {
               elem.validity = 'rangeOverflow';
-              elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeOverflow') || '';
+              elem.errorMessage = elem.setCustomValidityRangeOverflow || elem.setCustomValidity || '';
             }
           }
 
@@ -1997,7 +1996,7 @@ class AuroFormValidation {
 
             if (valueDate < minDate) {
               elem.validity = 'rangeUnderflow';
-              elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeUnderflow') || '';
+              elem.errorMessage = elem.setCustomValidityRangeUnderflow || elem.setCustomValidity || '';
             }
           }
         }
@@ -2020,10 +2019,10 @@ class AuroFormValidation {
 
     if (elem.hasAttribute('error')) {
       elem.validity = 'customError';
-      elem.setCustomValidity = elem.error;
+      elem.errorMessage = elem.setCustomValidityCustomError || elem.error || elem.setCustomValidity || '';
     } else if (validationShouldRun) {
       elem.validity = 'valid';
-      elem.setCustomValidity = '';
+      elem.errorMessage = '';
 
       /**
        * Only validate once we interact with the datepicker
@@ -2035,7 +2034,7 @@ class AuroFormValidation {
       let hasValue = elem.value && elem.value.length > 0;
 
       // If there is a second input in the elem and that value is undefined or an empty string set hasValue to false;
-      if (this.auroInputElements && this.auroInputElements.length === 2) {
+      if (this.auroInputElements?.length === 2) {
         if (!this.auroInputElements[1].value || this.auroInputElements[1].length === 0) {
           hasValue = false;
         }
@@ -2043,31 +2042,27 @@ class AuroFormValidation {
 
       if (!hasValue && elem.required) {
         elem.validity = 'valueMissing';
-        elem.setCustomValidity = elem.setCustomValidityValueMissing || '';
+        elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
       } else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
         this.validateType(elem);
         this.validateAttributes(elem);
       }
     }
 
-    if (this.auroInputElements && this.auroInputElements.length > 0) {
+    if (this.auroInputElements?.length > 0) {
       elem.validity = this.auroInputElements[0].validity;
-      elem.setCustomValidity = this.auroInputElements[0].setCustomValidity;
+      elem.errorMessage = this.auroInputElements[0].errorMessage;
 
-      if (elem.validity === 'valid') {
-        if (this.auroInputElements.length > 1) {
-          elem.validity = this.auroInputElements[1].validity;
-          elem.setCustomValidity = this.auroInputElements[1].setCustomValidity;
-        }
+      if (elem.validity === 'valid' && this.auroInputElements.length > 1) {
+        elem.validity = this.auroInputElements[1].validity;
+        elem.errorMessage = this.auroInputElements[1].errorMessage;
       }
     }
 
     if (validationShouldRun || elem.hasAttribute('error')) {
-      if (elem.validity && elem.validity !== 'valid') {
-        // Use the validity message override if it is declared
-        if (elem.ValidityMessageOverride) {
-          elem.setCustomValidity = elem.ValidityMessageOverride;
-        }
+      // Use the validity message override if it is declared
+      if (elem.validity && elem.validity !== 'valid' && elem.ValidityMessageOverride) {
+        elem.errorMessage = elem.ValidityMessageOverride;
       }
 
       this.getErrorMessage(elem);
@@ -2113,18 +2108,18 @@ class AuroFormValidation {
     if (elem.validity !== 'valid') {
       if (elem.setCustomValidity) {
         elem.errorMessage = elem.setCustomValidity;
-      } else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
+      } else if (this.runtimeUtils.elementMatch(elem, 'auro-input') && elem.errorMessage === '') {
         const input = elem.renderRoot.querySelector('input');
 
         if (input.validationMessage.length > 0) {
           elem.errorMessage = input.validationMessage;
         }
-      } else if (this.inputElements && this.inputElements.length > 0) {
+      } else if (this.inputElements?.length > 0  && elem.errorMessage === '') {
         const firstInput = this.inputElements[0];
 
         if (firstInput.validationMessage.length > 0) {
           elem.errorMessage = firstInput.validationMessage;
-        } else if (this.inputElements.length === 2) {
+        } else if (this.inputElements?.length === 2) {
           const secondInput = this.inputElements[1];
 
           if (secondInput.validationMessage.length > 0) {
@@ -2152,8 +2147,7 @@ class AuroFormValidation {
  * @attr {Boolean} bordered - Applies bordered UI variant.
  * @attr {Boolean} borderless - Applies borderless UI variant.
  * @attr {Boolean} disabled - If set, disables the input.
- * @attr {String}  error - When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value.
- * @prop {String}  errorMessage - Contains the help text message for the current validity error.
+ * @attr {String}  error - When defined, sets persistent validity to `customError` and sets the validation message to the attribute value.
  * @attr {Boolean} icon - 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.
  * @attr {String}  id - Sets the unique ID of the element.
  * @attr {String}  lang - defines the language of an element.
@@ -2167,10 +2161,10 @@ class AuroFormValidation {
  * @attr {Boolean} required - Populates the `required` attribute on the input. Used for client-side validation.
  * @attr {String}  pattern - Specifies a regular expression the form control's value should match.
  * @attr {String}  placeholder - Define custom placeholder text, only supported by date input formats.
- * @attr {String}  setCustomValidity - Sets a custom help text message to display for all validityStates.
+ * @attr {String}  setCustomValidity - Sets a custom help text message to display for all validity states.
  * @attr {String}  setCustomValidityCustomError - Custom help text message to display when validity = `customError`.
  * @attr {String}  setCustomValidityValueMissing - Custom help text message to display when validity = `valueMissing`.
- * @attr {String}  setCustomValidityBadInput - Custom help text message to display when validity = `badInput`.
+ * @attr {String}  setCustomValidityPatternMismatch - Custom help text message to display when validity = `patternMismatch`.
  * @attr {String}  setCustomValidityTooShort - Custom help text message to display when validity = `tooShort`.
  * @attr {String}  setCustomValidityTooLong - Custom help text message to display when validity = `tooLong`.
  * @attr {String}  setCustomValidityForType - Custom help text message to display for the declared element `type` and type validity fails.
@@ -2316,20 +2310,18 @@ class BaseInput extends r {
         type: String,
         reflect: true
       },
-      errorMessage:            { type: String },
       validity:                {
         type: String,
         reflect: true
       },
-      setCustomValidity:               { type: String },
-      setCustomValidityCustomError:    { type: String },
-      setCustomValidityValueMissing:   { type: String },
-      setCustomValidityBadInput:       { type: String },
-      setCustomValidityTooShort:       { type: String },
-      setCustomValidityTooLong:        { type: String },
-      setCustomValidityRangeOverflow:  { type: String},
-      setCustomValidityRangeUnderflow: { type: String},
-      customValidityTypeEmail:         { type: String }
+      setCustomValidity:                { type: String },
+      setCustomValidityCustomError:     { type: String },
+      setCustomValidityValueMissing:    { type: String },
+      setCustomValidityPatternMismatch: { type: String },
+      setCustomValidityTooShort:        { type: String },
+      setCustomValidityTooLong:         { type: String },
+      setCustomValidityRangeOverflow:   { type: String },
+      setCustomValidityRangeUnderflow:  { type: String }
     };
   }
 
@@ -2957,7 +2949,7 @@ class BaseInput extends r {
     this.maxLength = card.formatLength;
     this.minLength = card.formatMinLength;
 
-    this.setCustomValidity = card.setCustomValidity;
+    this.errorMessage = card.errorMessage;
 
     if (this.icon) {
       this.inputIconName = card.cardIcon;
@@ -2977,63 +2969,63 @@ class BaseInput extends r {
         name: 'Airlines',
         regex: /^(?<num>1|2)\d{0}/u,
         formatMinLength: 17,
-        setCustomValidity: CreditCardValidationMessage,
+        errorMessage: CreditCardValidationMessage,
         cardIcon: 'credit-card'
       },
       {
         name: 'Commercial',
         regex: /^(?<num>2)\d{0}/u,
         formatMinLength: 8,
-        setCustomValidity: CreditCardValidationMessage,
+        errorMessage: CreditCardValidationMessage,
         cardIcon: 'credit-card'
       },
       {
         name: 'Alaska Commercial',
         regex: /^(?<num>27)\d{0}/u,
         formatMinLength: 8,
-        setCustomValidity: CreditCardValidationMessage,
+        errorMessage: CreditCardValidationMessage,
         cardIcon: 'cc-alaska'
       },
       {
         name: 'American Express',
         regex: /^(?<num>34|37)\d{0}/u,
         formatLength: 17,
-        setCustomValidity: CreditCardValidationMessage,
+        errorMessage: CreditCardValidationMessage,
         cardIcon: 'cc-amex'
       },
       {
         name: 'Diners club',
         regex: /^(?<num>36|38)\d{0}/u,
         formatLength: 16,
-        setCustomValidity: CreditCardValidationMessage,
+        errorMessage: CreditCardValidationMessage,
         cardIcon: 'credit-card'
       },
       {
         name: 'Visa',
         regex: /^(?<num>4)\d{0}/u,
         formatLength: 19,
-        setCustomValidity: CreditCardValidationMessage,
+        errorMessage: CreditCardValidationMessage,
         cardIcon: 'cc-visa'
       },
       {
         name: 'Alaska Airlines Visa',
         regex: /^(?<num>4147\s34|4888\s93|4800\s11|4313\s51|4313\s07)\d{0}/u,
         formatLength: 19,
-        setCustomValidity: CreditCardValidationMessage,
+        errorMessage: CreditCardValidationMessage,
         cardIcon: 'cc-alaska'
       },
       {
         name: 'Master Card',
         regex: /^(?<num>5)\d{0}/u,
         formatLength: 19,
-        setCustomValidity: CreditCardValidationMessage,
+        errorMessage: CreditCardValidationMessage,
         cardIcon: 'cc-mastercard'
       },
       {
         name: 'Discover Card',
         regex: /^(?<num>6)\d{0}/u,
         formatLength: 19,
-        setCustomValidity: CreditCardValidationMessage,
+        errorMessage: CreditCardValidationMessage,
         cardIcon: 'cc-discover'
       }
     ];
@@ -3041,7 +3033,7 @@ class BaseInput extends r {
     let type = {
       name: 'Default Card',
       formatLength: 19,
-      setCustomValidity: CreditCardValidationMessage,
+      errorMessage: CreditCardValidationMessage,
       cardIcon: 'credit-card'
     };
 
@@ -4066,7 +4058,6 @@ class AuroInput extends BaseInput {
         <p class="inputElement-helpText" id="${this.uniqueId}" role="alert" aria-live="assertive" part="helpText">
           ${this.errorMessage}
         </p>`
-
       }
     `;
   }