@aurodesignsystem/auro-formkit 3.3.0-beta.2 → 3.4.0

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

@@ -4621,6 +4621,7 @@ class AuroFormValidation {
   reset(elem) {
     elem.validity = undefined;
     elem.value = undefined;
+    elem.touched = false;
 
     // Resets the second value of the datepicker in range state
     if (elem.valueEnd) {
@@ -4758,7 +4759,7 @@ class AuroFormValidation {
       } else if (elem.type === 'date' && elem.value?.length > 0) {
 
         // Guard Clause: if the value is too short
-        if (elem.value.length < elem.lengthForType) {
+        if (elem.value?.length < elem.lengthForType) {
           
           elem.validity = 'tooShort';
           elem.errorMessage = elem.setCustomValidityForType || elem.setCustomValidity || '';
@@ -4828,11 +4829,17 @@ class AuroFormValidation {
     this.getAuroInputs(elem);
 
     // Validate only if noValidate is not true and the input does not have focus
-    const validationShouldRun = force || (!elem.contains(document.activeElement) && elem.value !== undefined) || elem.validateOnInput;
+    let validationShouldRun =
+      force ||
+      (!elem.contains(document.activeElement) &&
+        (elem.touched ||
+          (!elem.touched && typeof elem.value !== "undefined"))) ||
+      elem.validateOnInput;
 
     if (elem.hasAttribute('error')) {
       elem.validity = 'customError';
       elem.errorMessage = elem.setCustomValidityCustomError || elem.error || elem.setCustomValidity || '';
+      validationShouldRun = false;
     } else if (validationShouldRun) {
       elem.validity = 'valid';
       elem.errorMessage = '';
@@ -4853,7 +4860,7 @@ class AuroFormValidation {
         }
       }
 
-      if (!hasValue && elem.required) {
+      if (!hasValue && elem.required && elem.touched) {
         elem.validity = 'valueMissing';
         elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
       } else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
@@ -4864,7 +4871,7 @@ class AuroFormValidation {
       }
     }
 
-    if (this.auroInputElements?.length > 0) {
+    if (this.auroInputElements?.length > 0 && elem.validity !== "valueMissing") {
       elem.validity = this.auroInputElements[0].validity;
       elem.errorMessage = this.auroInputElements[0].errorMessage;
 
@@ -4943,7 +4950,7 @@ class AuroFormValidation {
         }
       }
     } else {
-      elem.errorMessage = undefined;
+      elem.errorMessage = '';
     }
   }
 }
@@ -4994,6 +5001,7 @@ class BaseInput extends i {
    * @returns {void}
    */
   privateDefaults() {
+    this.touched = false;
     this.util = new AuroInputUtilities();
     this.validation = new AuroFormValidation();
     this.inputIconName = undefined;
@@ -5154,6 +5162,13 @@ class BaseInput extends i {
         type: String
       },
 
+      /** Exposes inputmode attribute for input.  */
+      inputmode: {
+        type: String,
+        attribute: true,
+        reflect: true
+      },
+
       /**
        * Defines the language of an element.
        */
@@ -5355,6 +5370,18 @@ class BaseInput extends i {
       validity: {
         type: String,
         reflect: true
+      },
+
+      /**
+       * Indicates whether the input is in a dirty state (has been interacted with).
+       * @type {boolean}
+       * @default false
+       * @private
+       */
+      touched: {
+        type: Boolean,
+        reflect: true,
+        attribute: false
       }
     };
   }
@@ -5641,15 +5668,7 @@ class BaseInput extends i {
    */
   handleFocusin() {
 
-    /**
-     * The input is considered to be in it's initial state based on
-     * if this.value === undefined. The first time we interact with the
-     * input manually, by applying focusin, we need to flag the
-     * input as no longer in the initial state.
-     */
-    if (this.value === undefined) {
-      this.value = '';
-    }
+    this.touched = true;
   }
 
   /**
@@ -5715,9 +5734,9 @@ class BaseInput extends i {
 
     if (this.type in defaultLengths) {
       this.lengthForType = this.format ? this.format.length : defaultLengths[this.type];
-      this.inputMode = 'numeric';
+      this.inputmode = this.inputmode || 'numeric';
     } else if (this.type === 'number') {
-      this.inputMode = 'numeric';
+      this.inputmode = this.inputmode || 'numeric';
     }
 
     if (this.type === "date" && !this.format) {
@@ -7075,7 +7094,7 @@ class AuroInput extends BaseInput {
             pattern="${o$3(this.definePattern())}"
             maxlength="${o$3(this.maxLength ? this.maxLength : undefined)}"
             minlength="${o$3(this.minLength ? this.minLength : undefined)}"
-            inputMode="${o$3(this.inputMode ? this.inputMode : undefined)}"
+            inputMode="${o$3(this.inputmode ? this.inputmode : undefined)}"
             ?required="${this.required}"
             ?disabled="${this.disabled}"
             aria-describedby="${this.uniqueId}"

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

@@ -4546,6 +4546,7 @@ class AuroFormValidation {
   reset(elem) {
     elem.validity = undefined;
     elem.value = undefined;
+    elem.touched = false;
 
     // Resets the second value of the datepicker in range state
     if (elem.valueEnd) {
@@ -4683,7 +4684,7 @@ class AuroFormValidation {
       } else if (elem.type === 'date' && elem.value?.length > 0) {
 
         // Guard Clause: if the value is too short
-        if (elem.value.length < elem.lengthForType) {
+        if (elem.value?.length < elem.lengthForType) {
           
           elem.validity = 'tooShort';
           elem.errorMessage = elem.setCustomValidityForType || elem.setCustomValidity || '';
@@ -4753,11 +4754,17 @@ class AuroFormValidation {
     this.getAuroInputs(elem);
 
     // Validate only if noValidate is not true and the input does not have focus
-    const validationShouldRun = force || (!elem.contains(document.activeElement) && elem.value !== undefined) || elem.validateOnInput;
+    let validationShouldRun =
+      force ||
+      (!elem.contains(document.activeElement) &&
+        (elem.touched ||
+          (!elem.touched && typeof elem.value !== "undefined"))) ||
+      elem.validateOnInput;
 
     if (elem.hasAttribute('error')) {
       elem.validity = 'customError';
       elem.errorMessage = elem.setCustomValidityCustomError || elem.error || elem.setCustomValidity || '';
+      validationShouldRun = false;
     } else if (validationShouldRun) {
       elem.validity = 'valid';
       elem.errorMessage = '';
@@ -4778,7 +4785,7 @@ class AuroFormValidation {
         }
       }
 
-      if (!hasValue && elem.required) {
+      if (!hasValue && elem.required && elem.touched) {
         elem.validity = 'valueMissing';
         elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
       } else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
@@ -4789,7 +4796,7 @@ class AuroFormValidation {
       }
     }
 
-    if (this.auroInputElements?.length > 0) {
+    if (this.auroInputElements?.length > 0 && elem.validity !== "valueMissing") {
       elem.validity = this.auroInputElements[0].validity;
       elem.errorMessage = this.auroInputElements[0].errorMessage;
 
@@ -4868,7 +4875,7 @@ class AuroFormValidation {
         }
       }
     } else {
-      elem.errorMessage = undefined;
+      elem.errorMessage = '';
     }
   }
 }
@@ -4919,6 +4926,7 @@ class BaseInput extends i {
    * @returns {void}
    */
   privateDefaults() {
+    this.touched = false;
     this.util = new AuroInputUtilities();
     this.validation = new AuroFormValidation();
     this.inputIconName = undefined;
@@ -5079,6 +5087,13 @@ class BaseInput extends i {
         type: String
       },
 
+      /** Exposes inputmode attribute for input.  */
+      inputmode: {
+        type: String,
+        attribute: true,
+        reflect: true
+      },
+
       /**
        * Defines the language of an element.
        */
@@ -5280,6 +5295,18 @@ class BaseInput extends i {
       validity: {
         type: String,
         reflect: true
+      },
+
+      /**
+       * Indicates whether the input is in a dirty state (has been interacted with).
+       * @type {boolean}
+       * @default false
+       * @private
+       */
+      touched: {
+        type: Boolean,
+        reflect: true,
+        attribute: false
       }
     };
   }
@@ -5566,15 +5593,7 @@ class BaseInput extends i {
    */
   handleFocusin() {
 
-    /**
-     * The input is considered to be in it's initial state based on
-     * if this.value === undefined. The first time we interact with the
-     * input manually, by applying focusin, we need to flag the
-     * input as no longer in the initial state.
-     */
-    if (this.value === undefined) {
-      this.value = '';
-    }
+    this.touched = true;
   }
 
   /**
@@ -5640,9 +5659,9 @@ class BaseInput extends i {
 
     if (this.type in defaultLengths) {
       this.lengthForType = this.format ? this.format.length : defaultLengths[this.type];
-      this.inputMode = 'numeric';
+      this.inputmode = this.inputmode || 'numeric';
     } else if (this.type === 'number') {
-      this.inputMode = 'numeric';
+      this.inputmode = this.inputmode || 'numeric';
     }
 
     if (this.type === "date" && !this.format) {
@@ -7000,7 +7019,7 @@ class AuroInput extends BaseInput {
             pattern="${o$3(this.definePattern())}"
             maxlength="${o$3(this.maxLength ? this.maxLength : undefined)}"
             minlength="${o$3(this.minLength ? this.minLength : undefined)}"
-            inputMode="${o$3(this.inputMode ? this.inputMode : undefined)}"
+            inputMode="${o$3(this.inputmode ? this.inputmode : undefined)}"
             ?required="${this.required}"
             ?disabled="${this.disabled}"
             aria-describedby="${this.uniqueId}"

package/components/input/demo/readme.md

@@ -99,7 +99,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.8/auro-input/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.3.0/auro-input/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

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

@@ -107,6 +107,12 @@ export default class BaseInput extends LitElement {
         id: {
             type: StringConstructor;
         };
+        /** Exposes inputmode attribute for input.  */
+        inputmode: {
+            type: StringConstructor;
+            attribute: boolean;
+            reflect: boolean;
+        };
         /**
          * Defines the language of an element.
          */
@@ -282,6 +288,13 @@ export default class BaseInput extends LitElement {
             type: StringConstructor;
             reflect: boolean;
         };
+        /**
+         * Indicates whether the input is in a dirty state (has been interacted with).
+         * @type {boolean}
+         * @default false
+         * @private
+         */
+        touched: boolean;
     };
     static get styles(): import("lit").CSSResult[];
     icon: boolean;
@@ -301,6 +314,7 @@ export default class BaseInput extends LitElement {
      * @returns {void}
      */
     private privateDefaults;
+    touched: boolean;
     util: AuroInputUtilities;
     validation: AuroFormValidation;
     inputIconName: any;
@@ -434,6 +448,7 @@ export default class BaseInput extends LitElement {
      */
     private configureDataForType;
     lengthForType: any;
+    inputmode: any;
     /**
      * Validates against list of supported this.allowedInputTypes; return type=text if invalid request.
      * @private

package/components/input/dist/index.js

@@ -4470,6 +4470,7 @@ class AuroFormValidation {
   reset(elem) {
     elem.validity = undefined;
     elem.value = undefined;
+    elem.touched = false;
 
     // Resets the second value of the datepicker in range state
     if (elem.valueEnd) {
@@ -4607,7 +4608,7 @@ class AuroFormValidation {
       } else if (elem.type === 'date' && elem.value?.length > 0) {
 
         // Guard Clause: if the value is too short
-        if (elem.value.length < elem.lengthForType) {
+        if (elem.value?.length < elem.lengthForType) {
           
           elem.validity = 'tooShort';
           elem.errorMessage = elem.setCustomValidityForType || elem.setCustomValidity || '';
@@ -4677,11 +4678,17 @@ class AuroFormValidation {
     this.getAuroInputs(elem);
 
     // Validate only if noValidate is not true and the input does not have focus
-    const validationShouldRun = force || (!elem.contains(document.activeElement) && elem.value !== undefined) || elem.validateOnInput;
+    let validationShouldRun =
+      force ||
+      (!elem.contains(document.activeElement) &&
+        (elem.touched ||
+          (!elem.touched && typeof elem.value !== "undefined"))) ||
+      elem.validateOnInput;
 
     if (elem.hasAttribute('error')) {
       elem.validity = 'customError';
       elem.errorMessage = elem.setCustomValidityCustomError || elem.error || elem.setCustomValidity || '';
+      validationShouldRun = false;
     } else if (validationShouldRun) {
       elem.validity = 'valid';
       elem.errorMessage = '';
@@ -4702,7 +4709,7 @@ class AuroFormValidation {
         }
       }
 
-      if (!hasValue && elem.required) {
+      if (!hasValue && elem.required && elem.touched) {
         elem.validity = 'valueMissing';
         elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
       } else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
@@ -4713,7 +4720,7 @@ class AuroFormValidation {
       }
     }
 
-    if (this.auroInputElements?.length > 0) {
+    if (this.auroInputElements?.length > 0 && elem.validity !== "valueMissing") {
       elem.validity = this.auroInputElements[0].validity;
       elem.errorMessage = this.auroInputElements[0].errorMessage;
 
@@ -4792,7 +4799,7 @@ class AuroFormValidation {
         }
       }
     } else {
-      elem.errorMessage = undefined;
+      elem.errorMessage = '';
     }
   }
 }
@@ -4843,6 +4850,7 @@ class BaseInput extends LitElement {
    * @returns {void}
    */
   privateDefaults() {
+    this.touched = false;
     this.util = new AuroInputUtilities();
     this.validation = new AuroFormValidation();
     this.inputIconName = undefined;
@@ -5003,6 +5011,13 @@ class BaseInput extends LitElement {
         type: String
       },
 
+      /** Exposes inputmode attribute for input.  */
+      inputmode: {
+        type: String,
+        attribute: true,
+        reflect: true
+      },
+
       /**
        * Defines the language of an element.
        */
@@ -5204,6 +5219,18 @@ class BaseInput extends LitElement {
       validity: {
         type: String,
         reflect: true
+      },
+
+      /**
+       * Indicates whether the input is in a dirty state (has been interacted with).
+       * @type {boolean}
+       * @default false
+       * @private
+       */
+      touched: {
+        type: Boolean,
+        reflect: true,
+        attribute: false
       }
     };
   }
@@ -5490,15 +5517,7 @@ class BaseInput extends LitElement {
    */
   handleFocusin() {
 
-    /**
-     * The input is considered to be in it's initial state based on
-     * if this.value === undefined. The first time we interact with the
-     * input manually, by applying focusin, we need to flag the
-     * input as no longer in the initial state.
-     */
-    if (this.value === undefined) {
-      this.value = '';
-    }
+    this.touched = true;
   }
 
   /**
@@ -5564,9 +5583,9 @@ class BaseInput extends LitElement {
 
     if (this.type in defaultLengths) {
       this.lengthForType = this.format ? this.format.length : defaultLengths[this.type];
-      this.inputMode = 'numeric';
+      this.inputmode = this.inputmode || 'numeric';
     } else if (this.type === 'number') {
-      this.inputMode = 'numeric';
+      this.inputmode = this.inputmode || 'numeric';
     }
 
     if (this.type === "date" && !this.format) {
@@ -6924,7 +6943,7 @@ class AuroInput extends BaseInput {
             pattern="${ifDefined(this.definePattern())}"
             maxlength="${ifDefined(this.maxLength ? this.maxLength : undefined)}"
             minlength="${ifDefined(this.minLength ? this.minLength : undefined)}"
-            inputMode="${ifDefined(this.inputMode ? this.inputMode : undefined)}"
+            inputMode="${ifDefined(this.inputmode ? this.inputmode : undefined)}"
             ?required="${this.required}"
             ?disabled="${this.disabled}"
             aria-describedby="${this.uniqueId}"

package/components/input/dist/registered.js

@@ -4470,6 +4470,7 @@ class AuroFormValidation {
   reset(elem) {
     elem.validity = undefined;
     elem.value = undefined;
+    elem.touched = false;
 
     // Resets the second value of the datepicker in range state
     if (elem.valueEnd) {
@@ -4607,7 +4608,7 @@ class AuroFormValidation {
       } else if (elem.type === 'date' && elem.value?.length > 0) {
 
         // Guard Clause: if the value is too short
-        if (elem.value.length < elem.lengthForType) {
+        if (elem.value?.length < elem.lengthForType) {
           
           elem.validity = 'tooShort';
           elem.errorMessage = elem.setCustomValidityForType || elem.setCustomValidity || '';
@@ -4677,11 +4678,17 @@ class AuroFormValidation {
     this.getAuroInputs(elem);
 
     // Validate only if noValidate is not true and the input does not have focus
-    const validationShouldRun = force || (!elem.contains(document.activeElement) && elem.value !== undefined) || elem.validateOnInput;
+    let validationShouldRun =
+      force ||
+      (!elem.contains(document.activeElement) &&
+        (elem.touched ||
+          (!elem.touched && typeof elem.value !== "undefined"))) ||
+      elem.validateOnInput;
 
     if (elem.hasAttribute('error')) {
       elem.validity = 'customError';
       elem.errorMessage = elem.setCustomValidityCustomError || elem.error || elem.setCustomValidity || '';
+      validationShouldRun = false;
     } else if (validationShouldRun) {
       elem.validity = 'valid';
       elem.errorMessage = '';
@@ -4702,7 +4709,7 @@ class AuroFormValidation {
         }
       }
 
-      if (!hasValue && elem.required) {
+      if (!hasValue && elem.required && elem.touched) {
         elem.validity = 'valueMissing';
         elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
       } else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
@@ -4713,7 +4720,7 @@ class AuroFormValidation {
       }
     }
 
-    if (this.auroInputElements?.length > 0) {
+    if (this.auroInputElements?.length > 0 && elem.validity !== "valueMissing") {
       elem.validity = this.auroInputElements[0].validity;
       elem.errorMessage = this.auroInputElements[0].errorMessage;
 
@@ -4792,7 +4799,7 @@ class AuroFormValidation {
         }
       }
     } else {
-      elem.errorMessage = undefined;
+      elem.errorMessage = '';
     }
   }
 }
@@ -4843,6 +4850,7 @@ class BaseInput extends LitElement {
    * @returns {void}
    */
   privateDefaults() {
+    this.touched = false;
     this.util = new AuroInputUtilities();
     this.validation = new AuroFormValidation();
     this.inputIconName = undefined;
@@ -5003,6 +5011,13 @@ class BaseInput extends LitElement {
         type: String
       },
 
+      /** Exposes inputmode attribute for input.  */
+      inputmode: {
+        type: String,
+        attribute: true,
+        reflect: true
+      },
+
       /**
        * Defines the language of an element.
        */
@@ -5204,6 +5219,18 @@ class BaseInput extends LitElement {
       validity: {
         type: String,
         reflect: true
+      },
+
+      /**
+       * Indicates whether the input is in a dirty state (has been interacted with).
+       * @type {boolean}
+       * @default false
+       * @private
+       */
+      touched: {
+        type: Boolean,
+        reflect: true,
+        attribute: false
       }
     };
   }
@@ -5490,15 +5517,7 @@ class BaseInput extends LitElement {
    */
   handleFocusin() {
 
-    /**
-     * The input is considered to be in it's initial state based on
-     * if this.value === undefined. The first time we interact with the
-     * input manually, by applying focusin, we need to flag the
-     * input as no longer in the initial state.
-     */
-    if (this.value === undefined) {
-      this.value = '';
-    }
+    this.touched = true;
   }
 
   /**
@@ -5564,9 +5583,9 @@ class BaseInput extends LitElement {
 
     if (this.type in defaultLengths) {
       this.lengthForType = this.format ? this.format.length : defaultLengths[this.type];
-      this.inputMode = 'numeric';
+      this.inputmode = this.inputmode || 'numeric';
     } else if (this.type === 'number') {
-      this.inputMode = 'numeric';
+      this.inputmode = this.inputmode || 'numeric';
     }
 
     if (this.type === "date" && !this.format) {
@@ -6924,7 +6943,7 @@ class AuroInput extends BaseInput {
             pattern="${ifDefined(this.definePattern())}"
             maxlength="${ifDefined(this.maxLength ? this.maxLength : undefined)}"
             minlength="${ifDefined(this.minLength ? this.minLength : undefined)}"
-            inputMode="${ifDefined(this.inputMode ? this.inputMode : undefined)}"
+            inputMode="${ifDefined(this.inputmode ? this.inputmode : undefined)}"
             ?required="${this.required}"
             ?disabled="${this.disabled}"
             aria-describedby="${this.uniqueId}"

package/components/menu/README.md

@@ -110,7 +110,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.8/auro-menu/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.3.0/auro-menu/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/menu/demo/readme.md

@@ -110,7 +110,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.8/auro-menu/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.3.0/auro-menu/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/radio/README.md

@@ -100,7 +100,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.8/auro-radio/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.3.0/auro-radio/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->