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

package/components/datepicker/demo/api.md

@@ -16,6 +16,7 @@
 | [error](#error)                           | `error`                           |           | `string`   |                                                  | When defined, sets persistent validity to `customError` and sets the validation message to the attribute value. |
 | [format](#format)                          | `format`                          |           | `string`   | "mm/dd/yyyy"                                     | Specifies the date format. The default is `mm/dd/yyyy`. |
 | [fullscreenBreakpoint](#fullscreenBreakpoint)            | `fullscreenBreakpoint`            |           | `string`   | "sm"                                             | Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)<br />at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.<br /><br />When expanded, the dropdown will automatically display in fullscreen mode<br />if the screen size is equal to or smaller than the selected breakpoint. |
+| [inputmode](#inputmode)                       | `inputmode`                       |           | `string`   |                                                  | Exposes inputmode attribute for input.           |
 | [largeFullscreenHeadline](#largeFullscreenHeadline)         | `largeFullscreenHeadline`         |           | `boolean`  | false                                            | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600. |
 | [maxDate](#maxDate)                         | `maxDate`                         |           | `string`   |                                                  | Maximum date. All dates after will be disabled.  |
 | [minDate](#minDate)                         | `minDate`                         |           | `string`   |                                                  | Minimum date. All dates before will be disabled. |
@@ -222,6 +223,35 @@ export function errorExample() {
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
+#### Input Mode
+
+You can manually set the input mode for the input.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inputmode.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/inputmode.html -->
+  <auro-datepicker inputmode="numeric">
+    <span slot="bib.fullscreen.headline">Datepicker Headline</span>
+    <span slot="fromLabel">Choose a date</span>
+    <span slot="bib.fullscreen.dateLabel">Choose a date</span>
+  </auro-datepicker>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/inputmode.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/inputmode.html -->
+
+```html
+<auro-datepicker inputmode="numeric">
+  <span slot="bib.fullscreen.headline">Datepicker Headline</span>
+  <span slot="fromLabel">Choose a date</span>
+  <span slot="bib.fullscreen.dateLabel">Choose a date</span>
+</auro-datepicker>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
 #### calendarStartDate & calendarEndDate
 
 The `calendarStartDate` and `calendarEndDate` properties may be used to explicitly control which calendar months _may_ be rendered in the calendar.

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

@@ -787,6 +787,7 @@ let AuroFormValidation$1 = 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) {
@@ -924,7 +925,7 @@ let AuroFormValidation$1 = 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 || '';
@@ -994,11 +995,17 @@ let AuroFormValidation$1 = 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 = '';
@@ -1019,7 +1026,7 @@ let AuroFormValidation$1 = 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')) {
@@ -1030,7 +1037,7 @@ let AuroFormValidation$1 = 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;
 
@@ -1109,7 +1116,7 @@ let AuroFormValidation$1 = class AuroFormValidation {
         }
       }
     } else {
-      elem.errorMessage = undefined;
+      elem.errorMessage = '';
     }
   }
 };
@@ -20758,6 +20765,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) {
@@ -20895,7 +20903,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 || '';
@@ -20965,11 +20973,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 = '';
@@ -20990,7 +21004,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')) {
@@ -21001,7 +21015,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;
 
@@ -21080,7 +21094,7 @@ class AuroFormValidation {
         }
       }
     } else {
-      elem.errorMessage = undefined;
+      elem.errorMessage = '';
     }
   }
 }
@@ -21131,6 +21145,7 @@ class BaseInput extends i$2 {
    * @returns {void}
    */
   privateDefaults() {
+    this.touched = false;
     this.util = new AuroInputUtilities();
     this.validation = new AuroFormValidation();
     this.inputIconName = undefined;
@@ -21291,6 +21306,13 @@ class BaseInput extends i$2 {
         type: String
       },
 
+      /** Exposes inputmode attribute for input.  */
+      inputmode: {
+        type: String,
+        attribute: true,
+        reflect: true
+      },
+
       /**
        * Defines the language of an element.
        */
@@ -21492,6 +21514,18 @@ class BaseInput extends i$2 {
       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
       }
     };
   }
@@ -21778,15 +21812,7 @@ class BaseInput extends i$2 {
    */
   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;
   }
 
   /**
@@ -21852,9 +21878,9 @@ class BaseInput extends i$2 {
 
     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) {
@@ -23212,7 +23238,7 @@ class AuroInput extends BaseInput {
             pattern="${o(this.definePattern())}"
             maxlength="${o(this.maxLength ? this.maxLength : undefined)}"
             minlength="${o(this.minLength ? this.minLength : undefined)}"
-            inputMode="${o(this.inputMode ? this.inputMode : undefined)}"
+            inputMode="${o(this.inputmode ? this.inputmode : undefined)}"
             ?required="${this.required}"
             ?disabled="${this.disabled}"
             aria-describedby="${this.uniqueId}"
@@ -23361,6 +23387,7 @@ class AuroDatePicker extends i$2 {
       this.calendarRenderUtil.updateCentralDate(this, new Date());
     }
 
+    this.touched = false;
     this.disabled = false;
     this.required = false;
     this.onDark = false;
@@ -23525,6 +23552,13 @@ class AuroDatePicker extends i$2 {
         reflect: true
       },
 
+      /** Exposes inputmode attribute for input.  */
+      inputmode: {
+        type: String,
+        attribute: true,
+        reflect: true
+      },
+
       /**
        * If declared, make bib.fullscreen.headline in HeadingDisplay.
        * Otherwise, Heading 600.
@@ -23692,6 +23726,18 @@ class AuroDatePicker extends i$2 {
        */
       valueEnd: {
         type: String
+      },
+
+      /**
+       * Indicates whether the datepicker is in a dirty state (has been interacted with).
+       * @type {boolean}
+       * @default false
+       * @private
+       */
+      touched: {
+        type: Boolean,
+        reflect: true,
+        attribute: false
       }
     };
   }
@@ -23968,27 +24014,15 @@ class AuroDatePicker extends i$2 {
   configureDatepicker() {
     this.addEventListener('focusin', () => {
 
-      /**
-       * The datepicker is considered to be in it's initial state based on
-       * if this.value === undefined. The first time we interact with the
-       * datepicker manually, by applying focusin, we need to flag the
-       * datepicker as no longer in the initial state.
-       */
-      if (this.value === undefined) {
-        this.value = '';
-      }
-
-      if (this.valueEnd === undefined) {
-        this.valueEnd = '';
-      }
+      this.touched = true;
     });
 
     this.addEventListener('focusout', (evt) => {
-      if (!this.noValidate && !evt.detail.expanded && this.inputList[0].value !== undefined) {
+      if (!this.noValidate && !evt.detail.expanded && this.touched) {
         if (!this.contains(document.activeElement)) {
           this.validation.validate(this.inputList[0]);
 
-          if (this.inputList[1] && this.inputList[1].value !== undefined) {
+          if (this.inputList[1] && this.inputList[1].touched) {
             this.validation.validate(this.inputList[1]);
           }
         }
@@ -24375,6 +24409,7 @@ class AuroDatePicker extends i$2 {
               setCustomValidityRangeOverflow="${this.setCustomValidityRangeOverflow}"
               setCustomValidityRangeUnderflow="${this.setCustomValidityRangeUnderflow}"
               ?disabled="${this.disabled}"
+              inputmode="${o(this.inputmode)}"
               part="input">
               <span slot="label"><slot name="fromLabel"></slot></span>
             </${this.inputTag}>

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

@@ -528,6 +528,7 @@ let AuroFormValidation$1 = 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) {
@@ -665,7 +666,7 @@ let AuroFormValidation$1 = 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 || '';
@@ -735,11 +736,17 @@ let AuroFormValidation$1 = 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 = '';
@@ -760,7 +767,7 @@ let AuroFormValidation$1 = 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')) {
@@ -771,7 +778,7 @@ let AuroFormValidation$1 = 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;
 
@@ -850,7 +857,7 @@ let AuroFormValidation$1 = class AuroFormValidation {
         }
       }
     } else {
-      elem.errorMessage = undefined;
+      elem.errorMessage = '';
     }
   }
 };
@@ -20499,6 +20506,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) {
@@ -20636,7 +20644,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 || '';
@@ -20706,11 +20714,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 = '';
@@ -20731,7 +20745,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')) {
@@ -20742,7 +20756,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;
 
@@ -20821,7 +20835,7 @@ class AuroFormValidation {
         }
       }
     } else {
-      elem.errorMessage = undefined;
+      elem.errorMessage = '';
     }
   }
 }
@@ -20872,6 +20886,7 @@ class BaseInput extends i$2 {
    * @returns {void}
    */
   privateDefaults() {
+    this.touched = false;
     this.util = new AuroInputUtilities();
     this.validation = new AuroFormValidation();
     this.inputIconName = undefined;
@@ -21032,6 +21047,13 @@ class BaseInput extends i$2 {
         type: String
       },
 
+      /** Exposes inputmode attribute for input.  */
+      inputmode: {
+        type: String,
+        attribute: true,
+        reflect: true
+      },
+
       /**
        * Defines the language of an element.
        */
@@ -21233,6 +21255,18 @@ class BaseInput extends i$2 {
       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
       }
     };
   }
@@ -21519,15 +21553,7 @@ class BaseInput extends i$2 {
    */
   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;
   }
 
   /**
@@ -21593,9 +21619,9 @@ class BaseInput extends i$2 {
 
     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) {
@@ -22953,7 +22979,7 @@ class AuroInput extends BaseInput {
             pattern="${o(this.definePattern())}"
             maxlength="${o(this.maxLength ? this.maxLength : undefined)}"
             minlength="${o(this.minLength ? this.minLength : undefined)}"
-            inputMode="${o(this.inputMode ? this.inputMode : undefined)}"
+            inputMode="${o(this.inputmode ? this.inputmode : undefined)}"
             ?required="${this.required}"
             ?disabled="${this.disabled}"
             aria-describedby="${this.uniqueId}"
@@ -23102,6 +23128,7 @@ class AuroDatePicker extends i$2 {
       this.calendarRenderUtil.updateCentralDate(this, new Date());
     }
 
+    this.touched = false;
     this.disabled = false;
     this.required = false;
     this.onDark = false;
@@ -23266,6 +23293,13 @@ class AuroDatePicker extends i$2 {
         reflect: true
       },
 
+      /** Exposes inputmode attribute for input.  */
+      inputmode: {
+        type: String,
+        attribute: true,
+        reflect: true
+      },
+
       /**
        * If declared, make bib.fullscreen.headline in HeadingDisplay.
        * Otherwise, Heading 600.
@@ -23433,6 +23467,18 @@ class AuroDatePicker extends i$2 {
        */
       valueEnd: {
         type: String
+      },
+
+      /**
+       * Indicates whether the datepicker is in a dirty state (has been interacted with).
+       * @type {boolean}
+       * @default false
+       * @private
+       */
+      touched: {
+        type: Boolean,
+        reflect: true,
+        attribute: false
       }
     };
   }
@@ -23709,27 +23755,15 @@ class AuroDatePicker extends i$2 {
   configureDatepicker() {
     this.addEventListener('focusin', () => {
 
-      /**
-       * The datepicker is considered to be in it's initial state based on
-       * if this.value === undefined. The first time we interact with the
-       * datepicker manually, by applying focusin, we need to flag the
-       * datepicker as no longer in the initial state.
-       */
-      if (this.value === undefined) {
-        this.value = '';
-      }
-
-      if (this.valueEnd === undefined) {
-        this.valueEnd = '';
-      }
+      this.touched = true;
     });
 
     this.addEventListener('focusout', (evt) => {
-      if (!this.noValidate && !evt.detail.expanded && this.inputList[0].value !== undefined) {
+      if (!this.noValidate && !evt.detail.expanded && this.touched) {
         if (!this.contains(document.activeElement)) {
           this.validation.validate(this.inputList[0]);
 
-          if (this.inputList[1] && this.inputList[1].value !== undefined) {
+          if (this.inputList[1] && this.inputList[1].touched) {
             this.validation.validate(this.inputList[1]);
           }
         }
@@ -24116,6 +24150,7 @@ class AuroDatePicker extends i$2 {
               setCustomValidityRangeOverflow="${this.setCustomValidityRangeOverflow}"
               setCustomValidityRangeUnderflow="${this.setCustomValidityRangeUnderflow}"
               ?disabled="${this.disabled}"
+              inputmode="${o(this.inputmode)}"
               part="input">
               <span slot="label"><slot name="fromLabel"></slot></span>
             </${this.inputTag}>

package/components/datepicker/demo/readme.md

@@ -104,7 +104,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-datepicker/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.3.0/auro-datepicker/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/datepicker/dist/auro-datepicker.d.ts

@@ -89,6 +89,12 @@ export class AuroDatePicker extends LitElement {
             type: StringConstructor;
             reflect: boolean;
         };
+        /** Exposes inputmode attribute for input.  */
+        inputmode: {
+            type: StringConstructor;
+            attribute: boolean;
+            reflect: boolean;
+        };
         /**
          * If declared, make bib.fullscreen.headline in HeadingDisplay.
          * Otherwise, Heading 600.
@@ -237,6 +243,13 @@ export class AuroDatePicker extends LitElement {
         valueEnd: {
             type: StringConstructor;
         };
+        /**
+         * Indicates whether the datepicker is in a dirty state (has been interacted with).
+         * @type {boolean}
+         * @default false
+         * @private
+         */
+        touched: boolean;
     };
     static get styles(): import("lit").CSSResult[];
     /**
@@ -257,6 +270,7 @@ export class AuroDatePicker extends LitElement {
      */
     private calendarRenderUtil;
     formattedStartDate: boolean;
+    touched: boolean;
     disabled: boolean;
     required: boolean;
     onDark: boolean;