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

package/components/input/dist/base-input.d.ts

@@ -10,15 +10,12 @@
  * @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}  helpText - Deprecated, see `slot`.
  * @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}  isValid - (DEPRECATED - Please use validity) Can be accessed to determine if the input validity. Returns true when validity has not yet been checked or validity = 'valid', all other cases return false. Not intended to be set by the consumer.
- * @attr {String}  label - Deprecated, see `slot`.
  * @attr {String}  lang - defines the language of an element.
- * @attr {String}  max - The maximum value allowed. This only applies for inputs with a type of `numeric` and all date formats.
+ * @attr {String}  max - The maximum value allowed. This only applies for inputs with a type of `number` and all date formats.
  * @attr {Number}  maxLength - The maximum number of characters the user can enter into the text input. This must be an integer value `0` or higher.
- * @attr {String}  min - The minimum value allowed. This only applies for inputs with a type of `numeric` and all date formats.
+ * @attr {String}  min - The minimum value allowed. This only applies for inputs with a type of `number` and all date formats.
  * @attr {Number}  minLength - 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`.
  * @attr {String}  name - Populates the `name` attribute on the input.
  * @attr {Boolean} noValidate - If set, disables auto-validation on blur.
@@ -57,9 +54,6 @@ export default class BaseInput extends LitElement {
         id: {
             type: StringConstructor;
         };
-        label: {
-            type: StringConstructor;
-        };
         name: {
             type: StringConstructor;
         };
@@ -89,9 +83,6 @@ export default class BaseInput extends LitElement {
         noValidate: {
             type: BooleanConstructor;
         };
-        helpText: {
-            type: StringConstructor;
-        };
         spellcheck: {
             type: StringConstructor;
         };
@@ -143,10 +134,6 @@ export default class BaseInput extends LitElement {
         errorMessage: {
             type: StringConstructor;
         };
-        isValid: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
         validity: {
             type: StringConstructor;
             reflect: boolean;
@@ -180,7 +167,6 @@ export default class BaseInput extends LitElement {
         };
     };
     static get styles(): import("lit").CSSResult[];
-    isValid: boolean;
     icon: boolean;
     disabled: boolean;
     required: boolean;
@@ -189,7 +175,6 @@ export default class BaseInput extends LitElement {
     min: any;
     maxLength: any;
     minLength: any;
-    label: string;
     activeLabel: boolean;
     setCustomValidityForType: string;
     /**
@@ -203,6 +188,7 @@ export default class BaseInput extends LitElement {
     showPassword: any;
     validationCCLength: number;
     hasValue: boolean;
+    label: string;
     allowedInputTypes: string[];
     dateInputTypes: string[];
     autoFormattingTypes: string[];
@@ -294,6 +280,11 @@ export default class BaseInput extends LitElement {
      * @returns {void}
      */
     validate(): void;
+    /**
+     * Resets component to initial state.
+     * @returns {void}
+     */
+    reset(): void;
     /**
      * Sets configuration data used elsewhere based on the `type` attribute.
      * @private
@@ -315,7 +306,6 @@ export default class BaseInput extends LitElement {
      * @returns {string} Evaluates pre-determined help text.
      */
     private getHelpText;
-    helpText: string;
     /**
      * Function to support show-password feature.
      * @private

package/components/input/dist/base-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"base-input.d.ts","sourceRoot":"","sources":["../src/base-input.js"],"names":[],"mappings":"AAoBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AAEH;IAiFE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAmCI;;WAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MA2BN;IAED,+CAMC;IApJC,iBAAoB;IAEpB,cAAiB;IACjB,kBAAqB;IACrB,kBAAqB;IACrB,oBAAuB;IACvB,SAAoB;IACpB,SAAoB;IACpB,eAA0B;IAC1B,eAA0B;IAC1B,cAAuC;IACvC,qBAAwB;IAExB,iCAAyC;IAG3C;;;;OAIG;IACH,wBAoDC;IAnDC,+BAA0C;IAC1C,mBAA8B;IAC9B,kBAAyB;IACzB,2BAAmC;IACnC,kBAAqB;IAErB,4BAQC;IAED,yBAQC;IAED,8BAMC;IAED;;;OAGG;IACH,iCAIC;IAMD,iBAEwC;IAqN1C,qBAwEC;IAlEC,+BAA0D;IAC1D,+BAA0D;IAIxD,6BAAqD;IAmC7C,uBAA0D;IA4BtE;;;;OAIG;IACH,2BAHW,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC,GACd,IAAI,CA6DhB;IArDG,iBAAwB;IAuD5B;;;OAGG;IACH,2BAkBC;IAED;;;OAGG;IACH,6BAMC;IAED;;;OAGG;IACH,sBAMC;IAED;;;;OAIG;IACH,cAEC;IAED;;;;;OAKG;IACH,sBAIC;IAED;;;;OAIG;IACH,2BAUC;IAED;;;;OAIG;IACH,yBAOC;IALC,cAAe;IAOjB;;;OAGG;IACH,oBA0BC;IAED;;;;OAIG;IACH,sBAWC;IAED;;;;OAIG;IACH,mBAMC;IAED;;;;;OAKG;IACH,yBAYC;IAED;;;OAGG;IACH,YAFa,IAAI,CAIhB;IAGD;;;;OAIG;IACH,6BAYC;IAVG,sBAAuB;IAY3B;;;;;OAKG;IACH,qBAMC;IAED;;;;;OAKG;IACH,oBA0BC;IAxBG,iBAA2C;IA0B/C;;;;OAIG;IACH,gCAGC;IAED;;;;OAIG;IACH,uBAkBC;IAED;;;;OAIG;IACH,wBAQC;IAED;;;;OAIG;IACH,2BAQC;IAKD;;;;OAIG;IACH,0BAWC;IALC,uBAA+C;IAOjD;;;;OAIG;IACH,oCAqFC;CACF;2BAr6B+B,KAAK;+BAUN,+BAA+B"}
+{"version":3,"file":"base-input.d.ts","sourceRoot":"","sources":["../src/base-input.js"],"names":[],"mappings":"AAoBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AAEH;IA+EE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAiCI;;WAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAuBN;IAED,+CAMC;IA5IC,cAAiB;IACjB,kBAAqB;IACrB,kBAAqB;IACrB,oBAAuB;IACvB,SAAoB;IACpB,SAAoB;IACpB,eAA0B;IAC1B,eAA0B;IAC1B,qBAAwB;IACxB,iCAAyC;IAG3C;;;;OAIG;IACH,wBAsDC;IArDC,+BAA0C;IAC1C,mBAA8B;IAC9B,kBAAyB;IACzB,2BAAmC;IACnC,kBAAqB;IACrB,cAAuC;IAEvC,4BASC;IAED,yBAQC;IAED,8BAMC;IAED;;;OAGG;IACH,iCAIC;IAMD,iBAEwC;IA+M1C,qBAwEC;IAlEC,+BAA0D;IAC1D,+BAA0D;IAIxD,6BAAqD;IAmC7C,uBAA0D;IA4BtE;;;;OAIG;IACH,2BAHW,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC,GACd,IAAI,CA6DhB;IArDG,iBAAwB;IAuD5B;;;OAGG;IACH,2BAkBC;IAED;;;OAGG;IACH,6BAMC;IAED;;;OAGG;IACH,sBAMC;IAED;;;;OAIG;IACH,cAEC;IAED;;;;;OAKG;IACH,sBAIC;IAED;;;;OAIG;IACH,2BAUC;IAED;;;;OAIG;IACH,yBAOC;IALC,cAAe;IAOjB;;;OAGG;IACH,oBA0BC;IAED;;;;OAIG;IACH,sBAWC;IAED;;;;OAIG;IACH,mBAMC;IAED;;;;;OAKG;IACH,yBAYC;IAED;;;OAGG;IACH,YAFa,IAAI,CAIhB;IAED;;;OAGG;IACH,SAFa,IAAI,CAIhB;IAED;;;;OAIG;IACH,6BAYC;IAVG,sBAAuB;IAY3B;;;;;OAKG;IACH,qBAMC;IAED;;;;;OAKG;IACH,oBAwBC;IAED;;;;OAIG;IACH,gCAGC;IAED;;;;OAIG;IACH,uBAkBC;IAED;;;;OAIG;IACH,wBAQC;IAED;;;;OAIG;IACH,2BAQC;IAKD;;;;OAIG;IACH,0BAWC;IALC,uBAA+C;IAOjD;;;;OAIG;IACH,oCAqFC;CACF;2BA/5B+B,KAAK;+BAUN,+BAA+B"}

package/components/input/dist/buttonVersion.d.ts

@@ -1,3 +1,3 @@
-declare const _default: "8.2.0";
+declare const _default: "8.2.2";
 export default _default;
 //# sourceMappingURL=buttonVersion.d.ts.map

package/components/input/dist/iconVersion.d.ts

@@ -1,3 +1,3 @@
-declare const _default: "6.1.1";
+declare const _default: "6.1.2";
 export default _default;
 //# sourceMappingURL=iconVersion.d.ts.map

package/components/input/dist/index.js

@@ -166,7 +166,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))}.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-25, 0.125rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host label.withValue{top:var(--ds-size-25, 0.125rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host([activeLabel]) .wrapper label{top:var(--ds-size-25, 0.125rem);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:disabled{background:none;pointer-events:none}`;
+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 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)}`;
 
@@ -1808,6 +1808,30 @@ class AuroFormValidation {
     this.runtimeUtils = new AuroLibraryRuntimeUtils();
   }
 
+  /**
+   * Resets the element to its initial state.
+   * @private
+   * @param {object} elem - HTML element to reset.
+   * @returns {void}
+   */
+  reset(elem) {
+    elem.validity = undefined;
+    elem.value = undefined;
+
+    // Resets the second value of the datepicker in range state
+    if (elem.valueEnd) {
+      elem.valueEnd = undefined;
+    }
+
+    // Resets selected option of element
+    if (elem.optionSelected) {
+      elem.optionSelected = undefined;
+    }
+
+    // Runs validation to handle error attribute
+    this.validate(elem);
+  }
+
   /**
    * Determines the validity state of the element based on the common attribute restrictions (pattern).
    * @private
@@ -1822,10 +1846,15 @@ class AuroFormValidation {
         elem.validity = 'badInput';
         elem.setCustomValidity = elem.setCustomValidityBadInput || '';
       }
-    } else if (elem.value && elem.value.length > 0 && elem.value.length < elem.minLength) {
+    }
+
+    // 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 || '';
-    } else if (elem.value && elem.value.length > elem.maxLength) {
+    }
+    
+    if (elem.value?.length > elem.maxLength) {
       elem.validity = 'tooLong';
       elem.setCustomValidity = elem.setCustomValidityTooLong || '';
     }
@@ -1851,7 +1880,7 @@ class AuroFormValidation {
           elem.validity = 'tooShort';
           elem.setCustomValidity = elem.setCustomValidityForType || '';
         }
-      } else if (elem.type === 'number' || elem.type === 'numeric') { // 'numeric` is a deprecated alias for number'
+      } else if (elem.type === 'number') {
         if (elem.max !== undefined && Number(elem.max) < Number(elem.value)) {
           elem.validity = 'rangeOverflow';
           elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeOverflow') || '';
@@ -1956,14 +1985,10 @@ class AuroFormValidation {
 
     if (validationShouldRun || elem.hasAttribute('error')) {
       if (elem.validity && elem.validity !== 'valid') {
-        elem.isValid = false;
-
         // Use the validity message override if it is declared
         if (elem.ValidityMessageOverride) {
           elem.setCustomValidity = elem.ValidityMessageOverride;
         }
-      } else {
-        elem.isValid = true;
       }
 
       this.getErrorMessage(elem);
@@ -2050,15 +2075,12 @@ class AuroFormValidation {
  * @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}  helpText - Deprecated, see `slot`.
  * @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}  isValid - (DEPRECATED - Please use validity) Can be accessed to determine if the input validity. Returns true when validity has not yet been checked or validity = 'valid', all other cases return false. Not intended to be set by the consumer.
- * @attr {String}  label - Deprecated, see `slot`.
  * @attr {String}  lang - defines the language of an element.
- * @attr {String}  max - The maximum value allowed. This only applies for inputs with a type of `numeric` and all date formats.
+ * @attr {String}  max - The maximum value allowed. This only applies for inputs with a type of `number` and all date formats.
  * @attr {Number}  maxLength - The maximum number of characters the user can enter into the text input. This must be an integer value `0` or higher.
- * @attr {String}  min - The minimum value allowed. This only applies for inputs with a type of `numeric` and all date formats.
+ * @attr {String}  min - The minimum value allowed. This only applies for inputs with a type of `number` and all date formats.
  * @attr {Number}  minLength - 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`.
  * @attr {String}  name - Populates the `name` attribute on the input.
  * @attr {Boolean} noValidate - If set, disables auto-validation on blur.
@@ -2098,8 +2120,6 @@ class BaseInput extends r {
   constructor() {
     super();
 
-    this.isValid = false;
-
     this.icon = false;
     this.disabled = false;
     this.required = false;
@@ -2108,9 +2128,7 @@ class BaseInput extends r {
     this.min = undefined;
     this.maxLength = undefined;
     this.minLength = undefined;
-    this.label = 'Input label is undefined';
     this.activeLabel = false;
-
     this.setCustomValidityForType = undefined;
   }
 
@@ -2125,9 +2143,11 @@ class BaseInput extends r {
     this.showPassword = false;
     this.validationCCLength = undefined;
     this.hasValue = false;
+    this.label = 'Input label is undefined';
 
     this.allowedInputTypes = [
       "text",
+      "number",
       "email",
       "password",
       "credit-card",
@@ -2177,7 +2197,6 @@ class BaseInput extends r {
   static get properties() {
     return {
       id:                      { type: String },
-      label:                   { type: String },
       name:                    { type: String },
       type:                    { type: String,
         reflect: true },
@@ -2191,7 +2210,6 @@ class BaseInput extends r {
       disabled:                { type: Boolean },
       required:                { type: Boolean },
       noValidate:              { type: Boolean },
-      helpText:                { type: String },
       spellcheck:              { type: String },
       autocorrect:             { type: String },
       autocapitalize:          { type: String },
@@ -2220,10 +2238,6 @@ class BaseInput extends r {
         reflect: true
       },
       errorMessage:            { type: String },
-      isValid: {
-        type: String,
-        reflect: true
-      },
       validity:                {
         type: String,
         reflect: true
@@ -2626,7 +2640,7 @@ class BaseInput extends r {
    * @return {void}
    */
   handleInput() {
-    // Prevent non-numeric characters from being entered on credit card fields.
+    // Prevent non-number characters from being entered on credit card fields.
     if (this.type === 'credit-card') {
       this.inputElement.value = this.inputElement.value.replace(/[\D]/gu, '');
     }
@@ -2712,6 +2726,13 @@ class BaseInput extends r {
     this.validation.validate(this);
   }
 
+  /**
+   * Resets component to initial state.
+   * @returns {void}
+   */
+  reset() {
+    this.validation.reset(this);
+  }
 
   /**
    * Sets configuration data used elsewhere based on the `type` attribute.
@@ -2754,30 +2775,28 @@ class BaseInput extends r {
    */
   getHelpText(type) {
     if (type === 'password') {
-      this.helpText = i18n(this.lang, 'password');
+      return i18n(this.lang, 'password');
     } else if (type === 'email') {
-      this.helpText = i18n(this.lang, 'email');
+      return i18n(this.lang, 'email');
     } else if (type === 'credit-card') {
-      this.helpText = i18n(this.lang, 'creditcard');
+      return i18n(this.lang, 'creditcard');
     } else if (type === 'month-day-year') {
-      this.helpText = i18n(this.lang, 'dateMMDDYYYY');
+      return i18n(this.lang, 'dateMMDDYYYY');
     } else if (type === 'month-year') {
-      this.helpText = i18n(this.lang, 'dateMMYY');
+      return i18n(this.lang, 'dateMMYY');
     } else if (type === 'month-fullyear') {
-      this.helpText = i18n(this.lang, 'dateMMYYYY');
+      return i18n(this.lang, 'dateMMYYYY');
     } else if (type === 'year-month-day') {
-      this.helpText = i18n(this.lang, 'dateYYYYMMDD');
+      return i18n(this.lang, 'dateYYYYMMDD');
     } else if (type === 'month') {
-      this.helpText = i18n(this.lang, 'dateMM');
+      return i18n(this.lang, 'dateMM');
     } else if (type === 'year') {
-      this.helpText = i18n(this.lang, 'dateYY');
+      return i18n(this.lang, 'dateYY');
     } else if (type === 'fullYear') {
-      this.helpText = i18n(this.lang, 'dateYYYY');
-    } else {
-      this.helpText = '';
+      return i18n(this.lang, 'dateYYYY');
     }
 
-    return this.helpText;
+    return '';
   }
 
   /**
@@ -3065,7 +3084,7 @@ const cacheFetch = (uri, options = {}) => {
   return _fetchMap.get(uri);
 };
 
-var styleCss$2 = 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}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, 0.75rem))}:host{color:currentColor;vertical-align:middle;line-height:1;display:inline-block}:host .logo{color:var(--ds-color-brand-midnight-400, #01426a)}svg{min-width:var(--ds-auro-icon-size, 1.5rem) !important;width:var(--ds-auro-icon-size, 1.5rem) !important;height:var(--ds-auro-icon-size, 1.5rem) !important}.label{display:flex;align-items:flex-start}.label svg{margin:0 var(--ds-size-50, 0.25rem)}.labelContainer{line-height:1.8}`;
+var styleCss$2 = 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}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, 0.75rem))}:host{color:currentColor;vertical-align:middle;line-height:1;display:inline-block}:host .logo{color:var(--ds-color-brand-midnight-400, #01426a)}svg{min-width:var(--ds-auro-icon-size, 1.5rem) !important;width:var(--ds-auro-icon-size, 1.5rem) !important;height:var(--ds-auro-icon-size, 1.5rem) !important}.label{display:flex;align-items:flex-start}.label svg{margin:0 var(--ds-size-50, 0.25rem)}.wrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.labelContainer{line-height:1.8}`;
 
 // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -3332,7 +3351,8 @@ class AuroIcon extends BaseIcon {
     };
 
     const classes = {
-      'label': this.label
+      'label': this.label,
+      'wrapper': true,
     };
 
     return x`
@@ -3356,7 +3376,7 @@ class AuroIcon extends BaseIcon {
   }
 }
 
-var iconVersion = '6.1.1';
+var iconVersion = '6.1.2';
 
 var styleCss$1 = 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_insetNone{padding:0}.util_insetXxxs{padding:.125rem}.util_insetXxxs--stretch{padding:.25rem .125rem}.util_insetXxxs--squish{padding:0 .125rem}.util_insetXxs{padding:.25rem}.util_insetXxs--stretch{padding:.375rem .25rem}.util_insetXxs--squish{padding:.125rem .25rem}.util_insetXs{padding:.5rem}.util_insetXs--stretch{padding:.75rem .5rem}.util_insetXs--squish{padding:.25rem .5rem}.util_insetSm{padding:.75rem}.util_insetSm--stretch{padding:1.125rem .75rem}.util_insetSm--squish{padding:.375rem .75rem}.util_insetMd{padding:1rem}.util_insetMd--stretch{padding:1.5rem 1rem}.util_insetMd--squish{padding:.5rem 1rem}.util_insetLg{padding:1.5rem}.util_insetLg--stretch{padding:2.25rem 1.5rem}.util_insetLg--squish{padding:.75rem 1.5rem}.util_insetXl{padding:2rem}.util_insetXl--stretch{padding:3rem 2rem}.util_insetXl--squish{padding:1rem 2rem}.util_insetXxl{padding:3rem}.util_insetXxl--stretch{padding:4.5rem 3rem}.util_insetXxl--squish{padding:1.5rem 3rem}.util_insetXxxl{padding:4rem}.util_insetXxxl--stretch{padding:6rem 4rem}.util_insetXxxl--squish{padding:2rem 4rem}:host([fluid]) .auro-button,:host([fluid=true]) .auro-button{min-width:auto;width:100%}:host([variant=flat]){display:inline-block;height:var(--ds-size-300, 1.5rem);width:var(--ds-size-300, 1.5rem)}:host([variant=flat]) .auro-button{height:100%;width:100%}::slotted(svg){vertical-align:middle}slot{pointer-events:none}.auro-button{position:relative;padding:0 var(--ds-size-300, 1.5rem);cursor:pointer;border-width:1px;border-style:solid;border-radius:var(--ds-border-radius, 0.375rem);font-family:var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);font-size:var(--ds-text-body-size-default, 1rem);font-weight:var(--ds-text-body-default-weight, 500);overflow:hidden;text-overflow:ellipsis;user-select:none;white-space:nowrap;min-height:var(--ds-size-600, 3rem);max-height:var(--ds-size-600, 3rem);display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--ds-size-100, 0.5rem);margin:0;-webkit-touch-callout:none;-webkit-user-select:none}.auro-button:active{transform:scale(0.95)}.auro-button:focus-visible:not([variant=secondary]):not([variant=tertiary]):not([variant=flat]):after{display:block;content:"";height:calc(100% - 2px);width:calc(100% - 2px);position:absolute;top:1px;left:1px;border-radius:4px;border-style:solid;border-width:2px}.auro-button:focus-visible[variant=secondary]:after,.auro-button:focus-visible[variant=tertiary]:after{display:block;content:"";height:100%;width:100%;position:absolute;top:0;left:0;border-radius:var(--ds-border-radius, 0.375rem);border-style:solid;border-width:2px}.auro-button.loading{cursor:not-allowed}.auro-button.loading *:not([auro-loader]){visibility:hidden}@media screen and (min-width: 576px){.auro-button{min-width:8.75rem;width:auto}}.auro-button:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=secondary]:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=tertiary]:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=flat]{height:unset;width:unset;min-height:unset;max-height:unset;min-width:unset;max-width:unset;border:0;border-radius:unset;gap:unset;padding:unset}.auro-button[onDark]:disabled{cursor:not-allowed;transform:unset}.auro-button[onDark][variant=secondary]:disabled{cursor:not-allowed;transform:unset}@media(hover: hover){.auro-button[onDark][variant=tertiary]:active,.auro-button[onDark][variant=tertiary]:hover{box-shadow:none}}.auro-button[onDark][variant=tertiary]:active{box-shadow:none}.auro-button[onDark][variant=tertiary]:disabled{cursor:not-allowed;transform:unset}.auro-button--slim{padding:var(--ds-size-100, 0.5rem) var(--ds-size-200, 1rem);font-size:var(--ds-text-body-size-sm, 0.875rem);min-width:unset;min-height:calc(var(--ds-size-500, 2.5rem) - var(--ds-size-50, 0.25rem));max-height:calc(var(--ds-size-500, 2.5rem) - var(--ds-size-50, 0.25rem))}.auro-button--iconOnly{padding:0 var(--ds-size-100, 0.5rem);border-radius:100px;min-width:unset;height:var(--ds-size-600, 3rem);width:var(--ds-size-500, 2.5rem)}.auro-button--iconOnly ::slotted(auro-icon),.auro-button--iconOnly ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, $ds-size-300)}.auro-button--iconOnlySlim{padding:0 var(--ds-size-50, 0.25rem);height:calc(var(--ds-size-400, 2rem) + var(--ds-size-50, 0.25rem));width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-50, 0.25rem))}.auro-button--iconOnlySlim ::slotted(auro-icon),.auro-button--iconOnlySlim ::slotted([auro-icon]){--ds-auro-icon-size: calc(var(--ds-size-200, $ds-size-200) + var(--ds-size-50, $ds-size-50))}.auro-button--rounded{border-radius:100px;box-shadow:var(--ds-elevation-300, 0px 0px 15px rgba(0, 0, 0, 0.2));height:var(--ds-size-500, 2.5rem);min-width:unset;transition:all 300ms ease-out}.auro-button--rounded ::slotted(auro-icon),.auro-button--rounded ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, $ds-size-300)}:host([rounded]) .textSlot{transition:opacity 300ms ease-in;opacity:1}:host([rounded][iconOnly]) .textSlot{opacity:0}:host([rounded][iconOnly]) .textWrapper{display:none}:host([rounded][iconOnly]) .auro-button{min-width:unset;padding:unset;width:var(--ds-size-600, 3rem)}[auro-loader]{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);pointer-events:none}`;
 
@@ -3708,6 +3728,7 @@ class AuroButton extends r {
     const classes = {
       'util_insetLg--squish': true,
       'auro-button': true,
+      'auroButton': true,
       'auro-button--rounded': this.rounded,
       'auro-button--slim': this.slim,
       'auro-button--iconOnly': this.iconOnly,
@@ -3747,7 +3768,7 @@ class AuroButton extends r {
   }
 }
 
-var buttonVersion = '8.2.0';
+var buttonVersion = '8.2.2';
 
 // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

package/components/input/package.json

@@ -12,8 +12,8 @@
     "url": "https://github.com/AlaskaAirlines/auro-input"
   },
   "dependencies": {
-    "@aurodesignsystem/auro-button": "^8.1.3",
-    "@aurodesignsystem/auro-icon": "^6.0.2",
+    "@aurodesignsystem/auro-button": "^8.2.2",
+    "@aurodesignsystem/auro-icon": "^6.1.2",
     "chalk": "^5.3.0",
     "cleave.js": "^1.6.0",
     "lit": "^3.2.1"

package/components/input/src/base-input.js

@@ -30,15 +30,12 @@ import AuroFormValidation from '@auro-formkit/form-validation';
  * @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}  helpText - Deprecated, see `slot`.
  * @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}  isValid - (DEPRECATED - Please use validity) Can be accessed to determine if the input validity. Returns true when validity has not yet been checked or validity = 'valid', all other cases return false. Not intended to be set by the consumer.
- * @attr {String}  label - Deprecated, see `slot`.
  * @attr {String}  lang - defines the language of an element.
- * @attr {String}  max - The maximum value allowed. This only applies for inputs with a type of `numeric` and all date formats.
+ * @attr {String}  max - The maximum value allowed. This only applies for inputs with a type of `number` and all date formats.
  * @attr {Number}  maxLength - The maximum number of characters the user can enter into the text input. This must be an integer value `0` or higher.
- * @attr {String}  min - The minimum value allowed. This only applies for inputs with a type of `numeric` and all date formats.
+ * @attr {String}  min - The minimum value allowed. This only applies for inputs with a type of `number` and all date formats.
  * @attr {Number}  minLength - 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`.
  * @attr {String}  name - Populates the `name` attribute on the input.
  * @attr {Boolean} noValidate - If set, disables auto-validation on blur.
@@ -78,8 +75,6 @@ export default class BaseInput extends LitElement {
   constructor() {
     super();
 
-    this.isValid = false;
-
     this.icon = false;
     this.disabled = false;
     this.required = false;
@@ -88,9 +83,7 @@ export default class BaseInput extends LitElement {
     this.min = undefined;
     this.maxLength = undefined;
     this.minLength = undefined;
-    this.label = 'Input label is undefined';
     this.activeLabel = false;
-
     this.setCustomValidityForType = undefined;
   }
 
@@ -105,9 +98,11 @@ export default class BaseInput extends LitElement {
     this.showPassword = false;
     this.validationCCLength = undefined;
     this.hasValue = false;
+    this.label = 'Input label is undefined';
 
     this.allowedInputTypes = [
       "text",
+      "number",
       "email",
       "password",
       "credit-card",
@@ -157,7 +152,6 @@ export default class BaseInput extends LitElement {
   static get properties() {
     return {
       id:                      { type: String },
-      label:                   { type: String },
       name:                    { type: String },
       type:                    { type: String,
         reflect: true },
@@ -171,7 +165,6 @@ export default class BaseInput extends LitElement {
       disabled:                { type: Boolean },
       required:                { type: Boolean },
       noValidate:              { type: Boolean },
-      helpText:                { type: String },
       spellcheck:              { type: String },
       autocorrect:             { type: String },
       autocapitalize:          { type: String },
@@ -200,10 +193,6 @@ export default class BaseInput extends LitElement {
         reflect: true
       },
       errorMessage:            { type: String },
-      isValid: {
-        type: String,
-        reflect: true
-      },
       validity:                {
         type: String,
         reflect: true
@@ -608,7 +597,7 @@ export default class BaseInput extends LitElement {
    * @return {void}
    */
   handleInput() {
-    // Prevent non-numeric characters from being entered on credit card fields.
+    // Prevent non-number characters from being entered on credit card fields.
     if (this.type === 'credit-card') {
       this.inputElement.value = this.inputElement.value.replace(/[\D]/gu, '');
     }
@@ -694,6 +683,13 @@ export default class BaseInput extends LitElement {
     this.validation.validate(this);
   }
 
+  /**
+   * Resets component to initial state.
+   * @returns {void}
+   */
+  reset() {
+    this.validation.reset(this);
+  }
 
   /**
    * Sets configuration data used elsewhere based on the `type` attribute.
@@ -736,30 +732,28 @@ export default class BaseInput extends LitElement {
    */
   getHelpText(type) {
     if (type === 'password') {
-      this.helpText = i18n(this.lang, 'password');
+      return i18n(this.lang, 'password');
     } else if (type === 'email') {
-      this.helpText = i18n(this.lang, 'email');
+      return i18n(this.lang, 'email');
     } else if (type === 'credit-card') {
-      this.helpText = i18n(this.lang, 'creditcard');
+      return i18n(this.lang, 'creditcard');
     } else if (type === 'month-day-year') {
-      this.helpText = i18n(this.lang, 'dateMMDDYYYY');
+      return i18n(this.lang, 'dateMMDDYYYY');
     } else if (type === 'month-year') {
-      this.helpText = i18n(this.lang, 'dateMMYY');
+      return i18n(this.lang, 'dateMMYY');
     } else if (type === 'month-fullyear') {
-      this.helpText = i18n(this.lang, 'dateMMYYYY');
+      return i18n(this.lang, 'dateMMYYYY');
     } else if (type === 'year-month-day') {
-      this.helpText = i18n(this.lang, 'dateYYYYMMDD');
+      return i18n(this.lang, 'dateYYYYMMDD');
     } else if (type === 'month') {
-      this.helpText = i18n(this.lang, 'dateMM');
+      return i18n(this.lang, 'dateMM');
     } else if (type === 'year') {
-      this.helpText = i18n(this.lang, 'dateYY');
+      return i18n(this.lang, 'dateYY');
     } else if (type === 'fullYear') {
-      this.helpText = i18n(this.lang, 'dateYYYY');
-    } else {
-      this.helpText = '';
+      return i18n(this.lang, 'dateYYYY');
     }
 
-    return this.helpText;
+    return '';
   }
 
   /**

package/components/input/src/buttonVersion.js

@@ -1 +1 @@
-export default '8.2.0';
+export default '8.2.2';

package/components/input/src/iconVersion.js

@@ -1 +1 @@
-export default '6.1.1';
+export default '6.1.2';

package/components/input/src/styles/input-css.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export default css`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:disabled{background:none;pointer-events:none}`;
+export default css`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)}`;

package/components/input/src/styles/input.css

@@ -1,3 +1,4 @@
+/* stylelint-disable property-no-vendor-prefix, selector-no-qualifying-type */
 input {
   position: relative;
   overflow: hidden;
@@ -16,7 +17,19 @@ input {
 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; /* For older versions of Firefox */
+  appearance: textfield; /* Standard property */
+}
 input:disabled {
   background: none;
   pointer-events: none;
 }
+
+:host([bordered]) input {
+  padding: var(--ds-size-400, 2rem) 0 var(--ds-size-100, 0.5rem);
+}

package/components/input/src/styles/input.scss

@@ -1,3 +1,5 @@
+/* stylelint-disable property-no-vendor-prefix, selector-no-qualifying-type */
+
 // Support for fallback values
 @import '@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
 
@@ -22,8 +24,27 @@ input {
     display: none;
   }
 
+  // Hides the number input arrows in Chrome, Safari, Edge, and Opera
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    margin: 0;
+    -webkit-appearance: none;
+  }
+
+  // Hides the number input arrows in Firefox
+  &[type='number'] {
+    -moz-appearance: textfield; /* For older versions of Firefox */
+    appearance: textfield; /* Standard property */
+  }
+
   &:disabled {
     background: none;
     pointer-events: none;
   }
 }
+
+:host([bordered]) {
+  input {
+    padding: var(--ds-size-400, $ds-size-400) 0 var(--ds-size-100, $ds-size-100);
+  }
+}

package/components/input/src/styles/label-css.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export default css`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-25, 0.125rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host label.withValue{top:var(--ds-size-25, 0.125rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host([activeLabel]) .wrapper label{top:var(--ds-size-25, 0.125rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}`;
+export default css`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}`;