@aurodesignsystem-dev/auro-formkit 0.0.0-pr784.0 → 0.0.0-pr785.1

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

@@ -1042,24 +1042,13 @@ class AuroFormValidation {
     this.getInputElements(elem);
     this.getAuroInputs(elem);
 
-    // Check if validation should run
+    // Validate only if noValidate is not true and the input does not have focus
     let validationShouldRun =
-
-      // If the validation was forced
       force ||
-
-      // If the validation should run on input
-      elem.validateOnInput ||
-
-      // State-based checks
-      (
-        // Element is not currently focused
-        !elem.contains(document.activeElement) && // native input is not focused directly
-        !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
-
-        // And element has been touched or is untouched but has a value
-        ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )
-      );
+      (!elem.contains(document.activeElement) &&
+        (elem.touched ||
+          (!elem.touched && typeof elem.value !== "undefined"))) ||
+      elem.validateOnInput;
 
     if (elem.hasAttribute('error')) {
       elem.validity = 'customError';

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

@@ -1034,24 +1034,13 @@ class AuroFormValidation {
     this.getInputElements(elem);
     this.getAuroInputs(elem);
 
-    // Check if validation should run
+    // Validate only if noValidate is not true and the input does not have focus
     let validationShouldRun =
-
-      // If the validation was forced
       force ||
-
-      // If the validation should run on input
-      elem.validateOnInput ||
-
-      // State-based checks
-      (
-        // Element is not currently focused
-        !elem.contains(document.activeElement) && // native input is not focused directly
-        !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
-
-        // And element has been touched or is untouched but has a value
-        ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )
-      );
+      (!elem.contains(document.activeElement) &&
+        (elem.touched ||
+          (!elem.touched && typeof elem.value !== "undefined"))) ||
+      elem.validateOnInput;
 
     if (elem.hasAttribute('error')) {
       elem.validity = 'customError';

package/components/checkbox/dist/index.js

@@ -987,24 +987,13 @@ class AuroFormValidation {
     this.getInputElements(elem);
     this.getAuroInputs(elem);
 
-    // Check if validation should run
+    // Validate only if noValidate is not true and the input does not have focus
     let validationShouldRun =
-
-      // If the validation was forced
       force ||
-
-      // If the validation should run on input
-      elem.validateOnInput ||
-
-      // State-based checks
-      (
-        // Element is not currently focused
-        !elem.contains(document.activeElement) && // native input is not focused directly
-        !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
-
-        // And element has been touched or is untouched but has a value
-        ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )
-      );
+      (!elem.contains(document.activeElement) &&
+        (elem.touched ||
+          (!elem.touched && typeof elem.value !== "undefined"))) ||
+      elem.validateOnInput;
 
     if (elem.hasAttribute('error')) {
       elem.validity = 'customError';

package/components/checkbox/dist/registered.js

@@ -987,24 +987,13 @@ class AuroFormValidation {
     this.getInputElements(elem);
     this.getAuroInputs(elem);
 
-    // Check if validation should run
+    // Validate only if noValidate is not true and the input does not have focus
     let validationShouldRun =
-
-      // If the validation was forced
       force ||
-
-      // If the validation should run on input
-      elem.validateOnInput ||
-
-      // State-based checks
-      (
-        // Element is not currently focused
-        !elem.contains(document.activeElement) && // native input is not focused directly
-        !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
-
-        // And element has been touched or is untouched but has a value
-        ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )
-      );
+      (!elem.contains(document.activeElement) &&
+        (elem.touched ||
+          (!elem.touched && typeof elem.value !== "undefined"))) ||
+      elem.validateOnInput;
 
     if (elem.hasAttribute('error')) {
       elem.validity = 'customError';

package/components/combobox/demo/api.md

@@ -39,7 +39,6 @@
 
 | Method     | Type                                   | Description                                      |
 |------------|----------------------------------------|--------------------------------------------------|
-| [clear](#clear)    | `(): void`                             | Clears the current value of the combobox.        |
 | [focus](#focus)    | `(): void`                             | Focuses the combobox trigger input.              |
 | [isValid](#isValid)  | `(): boolean`                          | Checks if the element is valid.                  |
 | [reset](#reset)    | `(): void`                             | Resets component to initial state.               |

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

@@ -954,24 +954,13 @@ let AuroFormValidation$1 = class AuroFormValidation {
     this.getInputElements(elem);
     this.getAuroInputs(elem);
 
-    // Check if validation should run
+    // Validate only if noValidate is not true and the input does not have focus
     let validationShouldRun =
-
-      // If the validation was forced
       force ||
-
-      // If the validation should run on input
-      elem.validateOnInput ||
-
-      // State-based checks
-      (
-        // Element is not currently focused
-        !elem.contains(document.activeElement) && // native input is not focused directly
-        !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
-
-        // And element has been touched or is untouched but has a value
-        ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )
-      );
+      (!elem.contains(document.activeElement) &&
+        (elem.touched ||
+          (!elem.touched && typeof elem.value !== "undefined"))) ||
+      elem.validateOnInput;
 
     if (elem.hasAttribute('error')) {
       elem.validity = 'customError';
@@ -2799,7 +2788,7 @@ class AuroFloatingUI {
    */
   mirrorSize() {
     // mirror the boxsize from bibSizer
-    if (this.element.bibSizer) {
+    if (this.element.bibSizer && this.element.matchWidth) {
       const sizerStyle = window.getComputedStyle(this.element.bibSizer);
       const bibContent = this.element.bib.shadowRoot.querySelector(".container");
       if (sizerStyle.width !== '0px') {
@@ -3011,7 +3000,7 @@ class AuroFloatingUI {
     if (this.element.contains(activeElement) || this.element.bib?.contains(activeElement)) {
       return;
     }
-    
+
     // if fullscreen bib is in fullscreen mode, do not close
     if (this.element.bib.hasAttribute('isfullscreen')) {
       return;
@@ -3199,7 +3188,7 @@ class AuroFloatingUI {
 
             event.preventDefault();
             this.handleClick();
-          } 
+          }
           break;
         case 'mouseenter':
           if (this.element.hoverToggle) {
@@ -4596,6 +4585,9 @@ class AuroDropdown extends AuroElement$4 {
 
     this.parentBorder = false;
 
+    /** @private */
+    this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
+
     this.privateDefaults();
   }
 
@@ -5029,12 +5021,14 @@ class AuroDropdown extends AuroElement$4 {
     if (changedProperties.size === 0 || changedProperties.has('isPopoverVisible')) {
       this.handleTriggerContentSlotChange();
     }
+  }
 
-    if (changedProperties.has('isPopoverVisible')) {
-      this.updateFocusTrap();
-      if (!this.isPopoverVisible && this.hasFocus) {
-        this.trigger.focus();
-      }
+  handleDropdownToggle(event) {
+    this.updateFocusTrap();
+    this.isPopoverVisible = event.detail.expanded;
+    const eventType = event.detail.eventType || "unknown";
+    if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
+      this.trigger.focus();
     }
   }
 
@@ -5042,6 +5036,7 @@ class AuroDropdown extends AuroElement$4 {
 
     // Configure the floater to, this will generate the ID for the bib
     this.floater.configure(this, 'auroDropdown');
+    this.addEventListener('auroDropdown-toggled', this.handleDropdownToggle);
 
     /**
      * @description Let subscribers know that the dropdown ID ha been generated and added.
@@ -10201,24 +10196,13 @@ class AuroFormValidation {
     this.getInputElements(elem);
     this.getAuroInputs(elem);
 
-    // Check if validation should run
+    // Validate only if noValidate is not true and the input does not have focus
     let validationShouldRun =
-
-      // If the validation was forced
       force ||
-
-      // If the validation should run on input
-      elem.validateOnInput ||
-
-      // State-based checks
-      (
-        // Element is not currently focused
-        !elem.contains(document.activeElement) && // native input is not focused directly
-        !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
-
-        // And element has been touched or is untouched but has a value
-        ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )
-      );
+      (!elem.contains(document.activeElement) &&
+        (elem.touched ||
+          (!elem.touched && typeof elem.value !== "undefined"))) ||
+      elem.validateOnInput;
 
     if (elem.hasAttribute('error')) {
       elem.validity = 'customError';
@@ -11169,9 +11153,9 @@ class BaseInput extends AuroElement$2$1 {
     this.inputElement.value = "";
     this.value = "";
     this.labelElement.classList.remove('inputElement-label--sticky');
-    this.notifyValueChanged();
     this.focus();
     this.validation.validate(this);
+    this.notifyValueChanged();
   }
 
   /**
@@ -11266,20 +11250,13 @@ class BaseInput extends AuroElement$2$1 {
   }
 
   /**
-   * Resets component to initial state, including resetting the touched state and validity.
+   * Resets component to initial state.
    * @returns {void}
    */
   reset() {
     this.validation.reset(this);
   }
 
-  /**
-   * Clears the input value
-   */
-  clear() {
-    this.value = undefined;
-  }
-
   /**
    * Sets configuration data used elsewhere based on the `type` attribute.
    * @private
@@ -16623,7 +16600,7 @@ class AuroCombobox extends AuroElement$1 {
     });
 
     this.menu.addEventListener('auroMenu-selectValueReset', () => {
-      this.clear();
+      this.reset();
     });
   }
 
@@ -16643,7 +16620,7 @@ class AuroCombobox extends AuroElement$1 {
     });
 
     /**
-     * Validate every time we remove focus from the combo box.
+     * Validate every time we remove focus from the datepicker.
      */
     this.addEventListener('focusout', () => {
       if (document.activeElement !== this) {
@@ -16848,16 +16825,7 @@ class AuroCombobox extends AuroElement$1 {
    */
   reset() {
     this.input.reset();
-    this.menu.value = undefined;
     this.validation.reset(this);
-  }
-
-  /**
-   * Clears the current value of the combobox.
-   * @returns {void}
-   */
-  clear() {
-    this.input.clear();
     this.menu.value = undefined;
   }
 
@@ -16883,7 +16851,7 @@ class AuroCombobox extends AuroElement$1 {
           this.hideBib();
         }
       } else {
-        this.clear();
+        this.reset();
       }
     }
 

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

@@ -812,24 +812,13 @@ let AuroFormValidation$1 = class AuroFormValidation {
     this.getInputElements(elem);
     this.getAuroInputs(elem);
 
-    // Check if validation should run
+    // Validate only if noValidate is not true and the input does not have focus
     let validationShouldRun =
-
-      // If the validation was forced
       force ||
-
-      // If the validation should run on input
-      elem.validateOnInput ||
-
-      // State-based checks
-      (
-        // Element is not currently focused
-        !elem.contains(document.activeElement) && // native input is not focused directly
-        !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
-
-        // And element has been touched or is untouched but has a value
-        ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )
-      );
+      (!elem.contains(document.activeElement) &&
+        (elem.touched ||
+          (!elem.touched && typeof elem.value !== "undefined"))) ||
+      elem.validateOnInput;
 
     if (elem.hasAttribute('error')) {
       elem.validity = 'customError';
@@ -2657,7 +2646,7 @@ class AuroFloatingUI {
    */
   mirrorSize() {
     // mirror the boxsize from bibSizer
-    if (this.element.bibSizer) {
+    if (this.element.bibSizer && this.element.matchWidth) {
       const sizerStyle = window.getComputedStyle(this.element.bibSizer);
       const bibContent = this.element.bib.shadowRoot.querySelector(".container");
       if (sizerStyle.width !== '0px') {
@@ -2869,7 +2858,7 @@ class AuroFloatingUI {
     if (this.element.contains(activeElement) || this.element.bib?.contains(activeElement)) {
       return;
     }
-    
+
     // if fullscreen bib is in fullscreen mode, do not close
     if (this.element.bib.hasAttribute('isfullscreen')) {
       return;
@@ -3057,7 +3046,7 @@ class AuroFloatingUI {
 
             event.preventDefault();
             this.handleClick();
-          } 
+          }
           break;
         case 'mouseenter':
           if (this.element.hoverToggle) {
@@ -4454,6 +4443,9 @@ class AuroDropdown extends AuroElement$4 {
 
     this.parentBorder = false;
 
+    /** @private */
+    this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
+
     this.privateDefaults();
   }
 
@@ -4887,12 +4879,14 @@ class AuroDropdown extends AuroElement$4 {
     if (changedProperties.size === 0 || changedProperties.has('isPopoverVisible')) {
       this.handleTriggerContentSlotChange();
     }
+  }
 
-    if (changedProperties.has('isPopoverVisible')) {
-      this.updateFocusTrap();
-      if (!this.isPopoverVisible && this.hasFocus) {
-        this.trigger.focus();
-      }
+  handleDropdownToggle(event) {
+    this.updateFocusTrap();
+    this.isPopoverVisible = event.detail.expanded;
+    const eventType = event.detail.eventType || "unknown";
+    if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
+      this.trigger.focus();
     }
   }
 
@@ -4900,6 +4894,7 @@ class AuroDropdown extends AuroElement$4 {
 
     // Configure the floater to, this will generate the ID for the bib
     this.floater.configure(this, 'auroDropdown');
+    this.addEventListener('auroDropdown-toggled', this.handleDropdownToggle);
 
     /**
      * @description Let subscribers know that the dropdown ID ha been generated and added.
@@ -10059,24 +10054,13 @@ class AuroFormValidation {
     this.getInputElements(elem);
     this.getAuroInputs(elem);
 
-    // Check if validation should run
+    // Validate only if noValidate is not true and the input does not have focus
     let validationShouldRun =
-
-      // If the validation was forced
       force ||
-
-      // If the validation should run on input
-      elem.validateOnInput ||
-
-      // State-based checks
-      (
-        // Element is not currently focused
-        !elem.contains(document.activeElement) && // native input is not focused directly
-        !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
-
-        // And element has been touched or is untouched but has a value
-        ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )
-      );
+      (!elem.contains(document.activeElement) &&
+        (elem.touched ||
+          (!elem.touched && typeof elem.value !== "undefined"))) ||
+      elem.validateOnInput;
 
     if (elem.hasAttribute('error')) {
       elem.validity = 'customError';
@@ -11027,9 +11011,9 @@ class BaseInput extends AuroElement$2$1 {
     this.inputElement.value = "";
     this.value = "";
     this.labelElement.classList.remove('inputElement-label--sticky');
-    this.notifyValueChanged();
     this.focus();
     this.validation.validate(this);
+    this.notifyValueChanged();
   }
 
   /**
@@ -11124,20 +11108,13 @@ class BaseInput extends AuroElement$2$1 {
   }
 
   /**
-   * Resets component to initial state, including resetting the touched state and validity.
+   * Resets component to initial state.
    * @returns {void}
    */
   reset() {
     this.validation.reset(this);
   }
 
-  /**
-   * Clears the input value
-   */
-  clear() {
-    this.value = undefined;
-  }
-
   /**
    * Sets configuration data used elsewhere based on the `type` attribute.
    * @private
@@ -16481,7 +16458,7 @@ class AuroCombobox extends AuroElement$1 {
     });
 
     this.menu.addEventListener('auroMenu-selectValueReset', () => {
-      this.clear();
+      this.reset();
     });
   }
 
@@ -16501,7 +16478,7 @@ class AuroCombobox extends AuroElement$1 {
     });
 
     /**
-     * Validate every time we remove focus from the combo box.
+     * Validate every time we remove focus from the datepicker.
      */
     this.addEventListener('focusout', () => {
       if (document.activeElement !== this) {
@@ -16706,16 +16683,7 @@ class AuroCombobox extends AuroElement$1 {
    */
   reset() {
     this.input.reset();
-    this.menu.value = undefined;
     this.validation.reset(this);
-  }
-
-  /**
-   * Clears the current value of the combobox.
-   * @returns {void}
-   */
-  clear() {
-    this.input.clear();
     this.menu.value = undefined;
   }
 
@@ -16741,7 +16709,7 @@ class AuroCombobox extends AuroElement$1 {
           this.hideBib();
         }
       } else {
-        this.clear();
+        this.reset();
       }
     }
 

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

@@ -390,11 +390,6 @@ export class AuroCombobox extends AuroElement {
      * @returns {void}
      */
     reset(): void;
-    /**
-     * Clears the current value of the combobox.
-     * @returns {void}
-     */
-    clear(): void;
     /**
      * Validates value.
      * @param {boolean} [force=false] - Whether to force validation.