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

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

@@ -220,12 +220,6 @@ export class AuroDropdown extends AuroElement {
     shape: any;
     size: any;
     parentBorder: boolean;
-    /**
-     * Handles the custom event `auroDropdown-toggled` to update the visibility of the dropdown bib.
-     * @private
-     * @param {CustomEvent} event - The custom event that contains the dropdown toggle information.
-     */
-    private handleDropdownToggle;
     /**
      * @private
      * @returns {object} Class definition for the wrapper element.

package/components/dropdown/dist/index.js

@@ -1689,7 +1689,7 @@ class AuroFloatingUI {
    */
   mirrorSize() {
     // mirror the boxsize from bibSizer
-    if (this.element.bibSizer && this.element.matchWidth) {
+    if (this.element.bibSizer) {
       const sizerStyle = window.getComputedStyle(this.element.bibSizer);
       const bibContent = this.element.bib.shadowRoot.querySelector(".container");
       if (sizerStyle.width !== '0px') {
@@ -1901,13 +1901,13 @@ 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;
     }
 
-    this.hideBib("keydown");
+    this.hideBib();
   }
 
   setupHideHandlers() {
@@ -1932,7 +1932,7 @@ class AuroFloatingUI {
           document.expandedAuroFormkitDropdown = null;
           document.expandedAuroFloater = this;
         } else {
-          this.hideBib("click");
+          this.hideBib();
         }
       }
     };
@@ -1945,7 +1945,7 @@ class AuroFloatingUI {
           // if something else is open, let it handle itself
           return;
         }
-        this.hideBib("keydown");
+        this.hideBib();
       }
     };
 
@@ -2028,11 +2028,7 @@ class AuroFloatingUI {
     }
   }
 
-  /**
-   * Hides the floating UI element.
-   * @param {String} eventType - The event type that triggered the hiding action.
-   */
-  hideBib(eventType = "unknown") {
+  hideBib() {
     if (!this.element.disabled && !this.element.noToggle) {
       this.lockScroll(false);
       this.element.triggerChevron?.removeAttribute('data-expanded');
@@ -2043,7 +2039,7 @@ class AuroFloatingUI {
       if (this.showing) {
         this.cleanupHideHandlers();
         this.showing = false;
-        this.dispatchEventDropdownToggle(eventType);
+        this.dispatchEventDropdownToggle();
       }
     }
     document.expandedAuroFloater = null;
@@ -2052,13 +2048,11 @@ class AuroFloatingUI {
   /**
    * @private
    * @returns {void} Dispatches event with an object showing the state of the dropdown.
-   * @param {String} eventType - The event type that triggered the toggle action.
    */
-  dispatchEventDropdownToggle(eventType) {
+  dispatchEventDropdownToggle() {
     const event = new CustomEvent(this.eventPrefix ? `${this.eventPrefix}-toggled` : 'toggled', {
       detail: {
         expanded: this.showing,
-        eventType: eventType || "unknown",
       },
       composed: true
     });
@@ -2068,7 +2062,7 @@ class AuroFloatingUI {
 
   handleClick() {
     if (this.element.isPopoverVisible) {
-      this.hideBib("click");
+      this.hideBib();
     } else {
       this.showBib();
     }
@@ -2095,7 +2089,7 @@ class AuroFloatingUI {
 
             event.preventDefault();
             this.handleClick();
-          }
+          } 
           break;
         case 'mouseenter':
           if (this.element.hoverToggle) {
@@ -2104,7 +2098,7 @@ class AuroFloatingUI {
           break;
         case 'mouseleave':
           if (this.element.hoverToggle) {
-            this.hideBib("mouseleave");
+            this.hideBib();
           }
           break;
         case 'focus':
@@ -3492,9 +3486,6 @@ class AuroDropdown extends AuroElement {
 
     this.parentBorder = false;
 
-    /** @private */
-    this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
-
     this.privateDefaults();
   }
 
@@ -3928,19 +3919,12 @@ class AuroDropdown extends AuroElement {
     if (changedProperties.size === 0 || changedProperties.has('isPopoverVisible')) {
       this.handleTriggerContentSlotChange();
     }
-  }
 
-  /**
-   * Handles the custom event `auroDropdown-toggled` to update the visibility of the dropdown bib.
-   * @private
-   * @param {CustomEvent} event - The custom event that contains the dropdown toggle information.
-   */
-  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();
+    if (changedProperties.has('isPopoverVisible')) {
+      this.updateFocusTrap();
+      if (!this.isPopoverVisible && this.hasFocus) {
+        this.trigger.focus();
+      }
     }
   }
 
@@ -3948,7 +3932,6 @@ class AuroDropdown extends AuroElement {
 
     // 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.

package/components/dropdown/dist/registered.js

@@ -1689,7 +1689,7 @@ class AuroFloatingUI {
    */
   mirrorSize() {
     // mirror the boxsize from bibSizer
-    if (this.element.bibSizer && this.element.matchWidth) {
+    if (this.element.bibSizer) {
       const sizerStyle = window.getComputedStyle(this.element.bibSizer);
       const bibContent = this.element.bib.shadowRoot.querySelector(".container");
       if (sizerStyle.width !== '0px') {
@@ -1901,13 +1901,13 @@ 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;
     }
 
-    this.hideBib("keydown");
+    this.hideBib();
   }
 
   setupHideHandlers() {
@@ -1932,7 +1932,7 @@ class AuroFloatingUI {
           document.expandedAuroFormkitDropdown = null;
           document.expandedAuroFloater = this;
         } else {
-          this.hideBib("click");
+          this.hideBib();
         }
       }
     };
@@ -1945,7 +1945,7 @@ class AuroFloatingUI {
           // if something else is open, let it handle itself
           return;
         }
-        this.hideBib("keydown");
+        this.hideBib();
       }
     };
 
@@ -2028,11 +2028,7 @@ class AuroFloatingUI {
     }
   }
 
-  /**
-   * Hides the floating UI element.
-   * @param {String} eventType - The event type that triggered the hiding action.
-   */
-  hideBib(eventType = "unknown") {
+  hideBib() {
     if (!this.element.disabled && !this.element.noToggle) {
       this.lockScroll(false);
       this.element.triggerChevron?.removeAttribute('data-expanded');
@@ -2043,7 +2039,7 @@ class AuroFloatingUI {
       if (this.showing) {
         this.cleanupHideHandlers();
         this.showing = false;
-        this.dispatchEventDropdownToggle(eventType);
+        this.dispatchEventDropdownToggle();
       }
     }
     document.expandedAuroFloater = null;
@@ -2052,13 +2048,11 @@ class AuroFloatingUI {
   /**
    * @private
    * @returns {void} Dispatches event with an object showing the state of the dropdown.
-   * @param {String} eventType - The event type that triggered the toggle action.
    */
-  dispatchEventDropdownToggle(eventType) {
+  dispatchEventDropdownToggle() {
     const event = new CustomEvent(this.eventPrefix ? `${this.eventPrefix}-toggled` : 'toggled', {
       detail: {
         expanded: this.showing,
-        eventType: eventType || "unknown",
       },
       composed: true
     });
@@ -2068,7 +2062,7 @@ class AuroFloatingUI {
 
   handleClick() {
     if (this.element.isPopoverVisible) {
-      this.hideBib("click");
+      this.hideBib();
     } else {
       this.showBib();
     }
@@ -2095,7 +2089,7 @@ class AuroFloatingUI {
 
             event.preventDefault();
             this.handleClick();
-          }
+          } 
           break;
         case 'mouseenter':
           if (this.element.hoverToggle) {
@@ -2104,7 +2098,7 @@ class AuroFloatingUI {
           break;
         case 'mouseleave':
           if (this.element.hoverToggle) {
-            this.hideBib("mouseleave");
+            this.hideBib();
           }
           break;
         case 'focus':
@@ -3492,9 +3486,6 @@ class AuroDropdown extends AuroElement {
 
     this.parentBorder = false;
 
-    /** @private */
-    this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
-
     this.privateDefaults();
   }
 
@@ -3928,19 +3919,12 @@ class AuroDropdown extends AuroElement {
     if (changedProperties.size === 0 || changedProperties.has('isPopoverVisible')) {
       this.handleTriggerContentSlotChange();
     }
-  }
 
-  /**
-   * Handles the custom event `auroDropdown-toggled` to update the visibility of the dropdown bib.
-   * @private
-   * @param {CustomEvent} event - The custom event that contains the dropdown toggle information.
-   */
-  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();
+    if (changedProperties.has('isPopoverVisible')) {
+      this.updateFocusTrap();
+      if (!this.isPopoverVisible && this.hasFocus) {
+        this.trigger.focus();
+      }
     }
   }
 
@@ -3948,7 +3932,6 @@ class AuroDropdown extends AuroElement {
 
     // 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.

package/components/input/demo/api.md

@@ -60,8 +60,9 @@ Generate unique names for dependency components.
 
 | Method     | Type                                   | Description                                      |
 |------------|----------------------------------------|--------------------------------------------------|
+| [clear](#clear)    | `(): void`                             | Clears the input value                           |
 | [focus](#focus)    | `(): void`                             | Function to set element focus.                   |
-| [reset](#reset)    | `(): void`                             | Resets component to initial state.               |
+| [reset](#reset)    | `(): void`                             | Resets component to initial state, including resetting the touched state and validity. |
 | [validate](#validate) | `(force?: boolean \| undefined): void` | Validates value.<br /><br />**force**: Whether to force validation. |
 
 ## Events

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

@@ -4847,13 +4847,24 @@ class AuroFormValidation {
     this.getInputElements(elem);
     this.getAuroInputs(elem);
 
-    // Validate only if noValidate is not true and the input does not have focus
+    // Check if validation should run
     let validationShouldRun =
+
+      // If the validation was forced
       force ||
-      (!elem.contains(document.activeElement) &&
-        (elem.touched ||
-          (!elem.touched && typeof elem.value !== "undefined"))) ||
-      elem.validateOnInput;
+
+      // 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") )
+      );
 
     if (elem.hasAttribute('error')) {
       elem.validity = 'customError';
@@ -5804,9 +5815,9 @@ class BaseInput extends AuroElement$2 {
     this.inputElement.value = "";
     this.value = "";
     this.labelElement.classList.remove('inputElement-label--sticky');
+    this.notifyValueChanged();
     this.focus();
     this.validation.validate(this);
-    this.notifyValueChanged();
   }
 
   /**
@@ -5901,13 +5912,20 @@ class BaseInput extends AuroElement$2 {
   }
 
   /**
-   * Resets component to initial state.
+   * Resets component to initial state, including resetting the touched state and validity.
    * @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

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

@@ -4772,13 +4772,24 @@ class AuroFormValidation {
     this.getInputElements(elem);
     this.getAuroInputs(elem);
 
-    // Validate only if noValidate is not true and the input does not have focus
+    // Check if validation should run
     let validationShouldRun =
+
+      // If the validation was forced
       force ||
-      (!elem.contains(document.activeElement) &&
-        (elem.touched ||
-          (!elem.touched && typeof elem.value !== "undefined"))) ||
-      elem.validateOnInput;
+
+      // 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") )
+      );
 
     if (elem.hasAttribute('error')) {
       elem.validity = 'customError';
@@ -5729,9 +5740,9 @@ class BaseInput extends AuroElement$2 {
     this.inputElement.value = "";
     this.value = "";
     this.labelElement.classList.remove('inputElement-label--sticky');
+    this.notifyValueChanged();
     this.focus();
     this.validation.validate(this);
-    this.notifyValueChanged();
   }
 
   /**
@@ -5826,13 +5837,20 @@ class BaseInput extends AuroElement$2 {
   }
 
   /**
-   * Resets component to initial state.
+   * Resets component to initial state, including resetting the touched state and validity.
    * @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

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

@@ -486,10 +486,14 @@ export default class BaseInput extends AuroElement {
      */
     validate(force?: boolean): void;
     /**
-     * Resets component to initial state.
+     * Resets component to initial state, including resetting the touched state and validity.
      * @returns {void}
      */
     reset(): void;
+    /**
+     * Clears the input value
+     */
+    clear(): void;
     /**
      * Sets configuration data used elsewhere based on the `type` attribute.
      * @private

package/components/input/dist/index.js

@@ -4696,13 +4696,24 @@ class AuroFormValidation {
     this.getInputElements(elem);
     this.getAuroInputs(elem);
 
-    // Validate only if noValidate is not true and the input does not have focus
+    // Check if validation should run
     let validationShouldRun =
+
+      // If the validation was forced
       force ||
-      (!elem.contains(document.activeElement) &&
-        (elem.touched ||
-          (!elem.touched && typeof elem.value !== "undefined"))) ||
-      elem.validateOnInput;
+
+      // 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") )
+      );
 
     if (elem.hasAttribute('error')) {
       elem.validity = 'customError';
@@ -5653,9 +5664,9 @@ class BaseInput extends AuroElement$2 {
     this.inputElement.value = "";
     this.value = "";
     this.labelElement.classList.remove('inputElement-label--sticky');
+    this.notifyValueChanged();
     this.focus();
     this.validation.validate(this);
-    this.notifyValueChanged();
   }
 
   /**
@@ -5750,13 +5761,20 @@ class BaseInput extends AuroElement$2 {
   }
 
   /**
-   * Resets component to initial state.
+   * Resets component to initial state, including resetting the touched state and validity.
    * @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

package/components/input/dist/registered.js

@@ -4696,13 +4696,24 @@ class AuroFormValidation {
     this.getInputElements(elem);
     this.getAuroInputs(elem);
 
-    // Validate only if noValidate is not true and the input does not have focus
+    // Check if validation should run
     let validationShouldRun =
+
+      // If the validation was forced
       force ||
-      (!elem.contains(document.activeElement) &&
-        (elem.touched ||
-          (!elem.touched && typeof elem.value !== "undefined"))) ||
-      elem.validateOnInput;
+
+      // 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") )
+      );
 
     if (elem.hasAttribute('error')) {
       elem.validity = 'customError';
@@ -5653,9 +5664,9 @@ class BaseInput extends AuroElement$2 {
     this.inputElement.value = "";
     this.value = "";
     this.labelElement.classList.remove('inputElement-label--sticky');
+    this.notifyValueChanged();
     this.focus();
     this.validation.validate(this);
-    this.notifyValueChanged();
   }
 
   /**
@@ -5750,13 +5761,20 @@ class BaseInput extends AuroElement$2 {
   }
 
   /**
-   * Resets component to initial state.
+   * Resets component to initial state, including resetting the touched state and validity.
    * @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

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

@@ -1082,13 +1082,24 @@ class AuroFormValidation {
     this.getInputElements(elem);
     this.getAuroInputs(elem);
 
-    // Validate only if noValidate is not true and the input does not have focus
+    // Check if validation should run
     let validationShouldRun =
+
+      // If the validation was forced
       force ||
-      (!elem.contains(document.activeElement) &&
-        (elem.touched ||
-          (!elem.touched && typeof elem.value !== "undefined"))) ||
-      elem.validateOnInput;
+
+      // 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") )
+      );
 
     if (elem.hasAttribute('error')) {
       elem.validity = 'customError';

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

@@ -1057,13 +1057,24 @@ class AuroFormValidation {
     this.getInputElements(elem);
     this.getAuroInputs(elem);
 
-    // Validate only if noValidate is not true and the input does not have focus
+    // Check if validation should run
     let validationShouldRun =
+
+      // If the validation was forced
       force ||
-      (!elem.contains(document.activeElement) &&
-        (elem.touched ||
-          (!elem.touched && typeof elem.value !== "undefined"))) ||
-      elem.validateOnInput;
+
+      // 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") )
+      );
 
     if (elem.hasAttribute('error')) {
       elem.validity = 'customError';

package/components/radio/dist/index.js

@@ -1010,13 +1010,24 @@ class AuroFormValidation {
     this.getInputElements(elem);
     this.getAuroInputs(elem);
 
-    // Validate only if noValidate is not true and the input does not have focus
+    // Check if validation should run
     let validationShouldRun =
+
+      // If the validation was forced
       force ||
-      (!elem.contains(document.activeElement) &&
-        (elem.touched ||
-          (!elem.touched && typeof elem.value !== "undefined"))) ||
-      elem.validateOnInput;
+
+      // 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") )
+      );
 
     if (elem.hasAttribute('error')) {
       elem.validity = 'customError';