@aurodesignsystem/auro-formkit 3.3.0-beta.1 → 3.3.0

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

@@ -55,6 +55,11 @@ export class AuroCheckbox extends LitElement {
             type: StringConstructor;
             reflect: boolean;
         };
+        /**
+         * Indicates whether the checkbox has been interacted with.
+         * @type {boolean}
+         */
+        touched: boolean;
     };
     /**
      * This will register this element with the browser.
@@ -69,12 +74,28 @@ export class AuroCheckbox extends LitElement {
     disabled: boolean;
     error: boolean;
     onDark: boolean;
+    touched: boolean;
     /**
      * @private
      */
     private runtimeUtils;
-    handleChange(event: any): void;
-    handleInput(event: any): void;
+    /**
+     * Handles the change event for the checkbox input.
+     * Updates the checked state and dispatches a corresponding custom event.
+     * This custom event is only for the purpose of supporting IE
+     * @private
+     * @param {Event} event - The change event from the checkbox input.
+     * @returns {void}
+     */
+    private handleChange;
+    /**
+     * Handles the input event for the checkbox input.
+     * Updates the checked state and dispatches a custom 'auroCheckbox-input' event.
+     * @private
+     * @param {Event} event - The input event from the checkbox input.
+     * @returns {void}
+     */
+    private handleInput;
     /**
      * Function to support @focusin event.
      * @private

package/components/checkbox/dist/index.js

@@ -101,11 +101,21 @@ class AuroCheckbox extends LitElement {
     this.disabled = false;
     this.error = false;
     this.onDark = false;
+    this.touched = false;
 
     /**
      * @private
      */
     this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
+
+    /**
+     * @private
+     * @property {boolean} delegatesFocus - Whether the shadow root delegates focus.
+     */
+    this.constructor.shadowRootOptions = {
+      ...LitElement.shadowRootOptions,
+      delegatesFocus: true,
+    };
   }
 
   static get styles() {
@@ -168,6 +178,15 @@ class AuroCheckbox extends LitElement {
       value: {
         type: String,
         reflect: true
+      },
+
+      /**
+       * Indicates whether the checkbox has been interacted with.
+       * @type {boolean}
+       */
+      touched: {
+        type: Boolean,
+        reflect: true
       }
     };
   }
@@ -184,8 +203,14 @@ class AuroCheckbox extends LitElement {
     AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroCheckbox);
   }
 
-  // This custom event is only for the purpose of supporting IE
-  // .addEventListener('change', function() { })
+  /**
+   * Handles the change event for the checkbox input.
+   * Updates the checked state and dispatches a corresponding custom event.
+   * This custom event is only for the purpose of supporting IE
+   * @private
+   * @param {Event} event - The change event from the checkbox input.
+   * @returns {void}
+   */
   handleChange(event) {
     this.checked = event.target.checked;
     const customEvent = new CustomEvent(event.type, event);
@@ -193,6 +218,13 @@ class AuroCheckbox extends LitElement {
     this.dispatchEvent(customEvent);
   }
 
+  /**
+   * Handles the input event for the checkbox input.
+   * Updates the checked state and dispatches a custom 'auroCheckbox-input' event.
+   * @private
+   * @param {Event} event - The input event from the checkbox input.
+   * @returns {void}
+   */
   handleInput(event) {
     this.checked = event.target.checked;
 
@@ -209,6 +241,7 @@ class AuroCheckbox extends LitElement {
    * @returns {void}
    */
   handleFocusin() {
+    this.touched = true;
     this.dispatchEvent(new CustomEvent('auroCheckbox-focusin', {
       bubbles: true,
       cancelable: false,
@@ -237,6 +270,7 @@ class AuroCheckbox extends LitElement {
   reset() {
     this.checked = false;
     this.error = false;
+    this.touched = false;
   }
 
   firstUpdated() {
@@ -719,6 +753,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) {
@@ -856,7 +891,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 || '';
@@ -926,11 +961,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 = '';
@@ -951,7 +992,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')) {
@@ -962,7 +1003,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;
 
@@ -1041,7 +1082,7 @@ class AuroFormValidation {
         }
       }
     } else {
-      elem.errorMessage = undefined;
+      elem.errorMessage = '';
     }
   }
 }
@@ -1092,7 +1133,7 @@ var colorCss$1 = css`:host{color:var(--ds-auro-checkbox-group-text-color)}:host(
 
 var colorCss = css`:host([error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]){--ds-auro-helptext-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][error]){--ds-auro-helptext-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
 
-var styleCss = css`.helptext-wrapper{display:none;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-size-200, 1rem)}:host([large]) .helptext-wrapper{font-size:var(--ds-text-body-size-default, 1rem)}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
+var styleCss = css`.helptext-wrapper{display:none;font-size:var(--ds-basic-text-body-xs-font-size, 12px);font-weight:var(--ds-basic-text-body-xs-font-weight, 450);letter-spacing:var(--ds-basic-text-body-xs-letter-spacing, 0);line-height:var(--ds-basic-text-body-xs-line-height, 16px)}:host([large]) .helptext-wrapper{font-size:var(--ds-basic-text-body-default-font-size, 16px);font-weight:var(--ds-basic-text-body-default-font-weight, 450);letter-spacing:var(--ds-basic-text-body-default-letter-spacing, 0);line-height:var(--ds-basic-text-body-default-line-height, 24px)}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
 
 var tokensCss = css`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
 
@@ -1321,6 +1362,14 @@ class AuroCheckboxGroup extends LitElement {
     this.horizontal = false;
     this.onDark = false;
 
+    /**
+     * Indicates whether the checkbox group is in a dirty state (has been interacted with).
+     * @type {boolean}
+     * @default false
+     * @private
+     */
+    this.touched = false;
+
     /**
      * @private
      */
@@ -1510,6 +1559,8 @@ class AuroCheckboxGroup extends LitElement {
     };
 
     this.addEventListener('auroCheckbox-focusin', () => {
+      this.touched = true;
+
       if (!this.value) {
         this.value = [];
       }

package/components/checkbox/dist/registered.js

@@ -101,11 +101,21 @@ class AuroCheckbox extends LitElement {
     this.disabled = false;
     this.error = false;
     this.onDark = false;
+    this.touched = false;
 
     /**
      * @private
      */
     this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
+
+    /**
+     * @private
+     * @property {boolean} delegatesFocus - Whether the shadow root delegates focus.
+     */
+    this.constructor.shadowRootOptions = {
+      ...LitElement.shadowRootOptions,
+      delegatesFocus: true,
+    };
   }
 
   static get styles() {
@@ -168,6 +178,15 @@ class AuroCheckbox extends LitElement {
       value: {
         type: String,
         reflect: true
+      },
+
+      /**
+       * Indicates whether the checkbox has been interacted with.
+       * @type {boolean}
+       */
+      touched: {
+        type: Boolean,
+        reflect: true
       }
     };
   }
@@ -184,8 +203,14 @@ class AuroCheckbox extends LitElement {
     AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroCheckbox);
   }
 
-  // This custom event is only for the purpose of supporting IE
-  // .addEventListener('change', function() { })
+  /**
+   * Handles the change event for the checkbox input.
+   * Updates the checked state and dispatches a corresponding custom event.
+   * This custom event is only for the purpose of supporting IE
+   * @private
+   * @param {Event} event - The change event from the checkbox input.
+   * @returns {void}
+   */
   handleChange(event) {
     this.checked = event.target.checked;
     const customEvent = new CustomEvent(event.type, event);
@@ -193,6 +218,13 @@ class AuroCheckbox extends LitElement {
     this.dispatchEvent(customEvent);
   }
 
+  /**
+   * Handles the input event for the checkbox input.
+   * Updates the checked state and dispatches a custom 'auroCheckbox-input' event.
+   * @private
+   * @param {Event} event - The input event from the checkbox input.
+   * @returns {void}
+   */
   handleInput(event) {
     this.checked = event.target.checked;
 
@@ -209,6 +241,7 @@ class AuroCheckbox extends LitElement {
    * @returns {void}
    */
   handleFocusin() {
+    this.touched = true;
     this.dispatchEvent(new CustomEvent('auroCheckbox-focusin', {
       bubbles: true,
       cancelable: false,
@@ -237,6 +270,7 @@ class AuroCheckbox extends LitElement {
   reset() {
     this.checked = false;
     this.error = false;
+    this.touched = false;
   }
 
   firstUpdated() {
@@ -719,6 +753,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) {
@@ -856,7 +891,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 || '';
@@ -926,11 +961,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 = '';
@@ -951,7 +992,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')) {
@@ -962,7 +1003,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;
 
@@ -1041,7 +1082,7 @@ class AuroFormValidation {
         }
       }
     } else {
-      elem.errorMessage = undefined;
+      elem.errorMessage = '';
     }
   }
 }
@@ -1092,7 +1133,7 @@ var colorCss$1 = css`:host{color:var(--ds-auro-checkbox-group-text-color)}:host(
 
 var colorCss = css`:host([error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]){--ds-auro-helptext-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][error]){--ds-auro-helptext-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
 
-var styleCss = css`.helptext-wrapper{display:none;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-size-200, 1rem)}:host([large]) .helptext-wrapper{font-size:var(--ds-text-body-size-default, 1rem)}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
+var styleCss = css`.helptext-wrapper{display:none;font-size:var(--ds-basic-text-body-xs-font-size, 12px);font-weight:var(--ds-basic-text-body-xs-font-weight, 450);letter-spacing:var(--ds-basic-text-body-xs-letter-spacing, 0);line-height:var(--ds-basic-text-body-xs-line-height, 16px)}:host([large]) .helptext-wrapper{font-size:var(--ds-basic-text-body-default-font-size, 16px);font-weight:var(--ds-basic-text-body-default-font-weight, 450);letter-spacing:var(--ds-basic-text-body-default-letter-spacing, 0);line-height:var(--ds-basic-text-body-default-line-height, 24px)}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
 
 var tokensCss = css`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
 
@@ -1321,6 +1362,14 @@ class AuroCheckboxGroup extends LitElement {
     this.horizontal = false;
     this.onDark = false;
 
+    /**
+     * Indicates whether the checkbox group is in a dirty state (has been interacted with).
+     * @type {boolean}
+     * @default false
+     * @private
+     */
+    this.touched = false;
+
     /**
      * @private
      */
@@ -1510,6 +1559,8 @@ class AuroCheckboxGroup extends LitElement {
     };
 
     this.addEventListener('auroCheckbox-focusin', () => {
+      this.touched = true;
+
       if (!this.value) {
         this.value = [];
       }

package/components/combobox/README.md

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

package/components/combobox/demo/api.html

@@ -26,6 +26,7 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.css">
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials-as.css" />
   </head>
   <body class="auro-markdown">
     <main></main>