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

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) {
@@ -10201,24 +10190,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';
@@ -11042,9 +11020,9 @@ class BaseInput extends AuroElement$2$1 {
         if (!this.shadowRoot.contains(this.getActiveElement())) {
           this.validation.validate(this);
         }
-      }
 
-      this.notifyValueChanged();
+        this.notifyValueChanged();
+      }
     }
 
     if (changedProperties.has('error')) {
@@ -11169,9 +11147,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 +11244,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 +16594,7 @@ class AuroCombobox extends AuroElement$1 {
     });
 
     this.menu.addEventListener('auroMenu-selectValueReset', () => {
-      this.clear();
+      this.reset();
     });
   }
 
@@ -16643,7 +16614,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 +16819,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 +16845,7 @@ class AuroCombobox extends AuroElement$1 {
           this.hideBib();
         }
       } else {
-        this.clear();
+        this.reset();
       }
     }
 

package/components/combobox/demo/index.html

@@ -16,24 +16,18 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Auro Web Component Demo | auro-combobox</title>
-
-    <!-- Prism.js Stylesheet -->
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
-
-    <!-- Legacy reference is still needed to support auro-combobox's use of legacy token values at this time -->
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
-
-    <!-- Design Token Alaska Theme -->
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
-    
-    <!-- Webcore Stylesheet Alaska Theme -->
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
-    
-    <!-- Demo Specific Styles -->
+    <title>Auro Web Component Generator | auro-combobox custom element</title>
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"
+    />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/auro-classic/CSSCustomProperties.css">
+    <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" />
-</head>
+    <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>
 

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) {
@@ -10059,24 +10048,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';
@@ -10900,9 +10878,9 @@ class BaseInput extends AuroElement$2$1 {
         if (!this.shadowRoot.contains(this.getActiveElement())) {
           this.validation.validate(this);
         }
-      }
 
-      this.notifyValueChanged();
+        this.notifyValueChanged();
+      }
     }
 
     if (changedProperties.has('error')) {
@@ -11027,9 +11005,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 +11102,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 +16452,7 @@ class AuroCombobox extends AuroElement$1 {
     });
 
     this.menu.addEventListener('auroMenu-selectValueReset', () => {
-      this.clear();
+      this.reset();
     });
   }
 
@@ -16501,7 +16472,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 +16677,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 +16703,7 @@ class AuroCombobox extends AuroElement$1 {
           this.hideBib();
         }
       } else {
-        this.clear();
+        this.reset();
       }
     }
 

package/components/combobox/demo/readme.html

@@ -16,24 +16,17 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Auro Web Component Demo | auro-combobox</title>
-
-    <!-- Prism.js Stylesheet -->
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
-
-    <!-- Legacy reference is still needed to support auro-combobox's use of legacy token values at this time -->
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
-
-    <!-- Design Token Alaska Theme -->
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
-    
-    <!-- Webcore Stylesheet Alaska Theme -->
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
-    
-    <!-- Demo Specific Styles -->
+    <title>Auro Web Component Generator | auro-combobox custom element</title>
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"
+    />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/auro-classic/CSSCustomProperties.css">
+    <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" />
-</head>
+  </head>
   <body class="auro-markdown">
     <main></main>
 

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.

package/components/combobox/dist/index.js

@@ -749,24 +749,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';
@@ -2588,7 +2577,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') {
@@ -2800,7 +2789,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;
@@ -2988,7 +2977,7 @@ class AuroFloatingUI {
 
             event.preventDefault();
             this.handleClick();
-          } 
+          }
           break;
         case 'mouseenter':
           if (this.element.hoverToggle) {
@@ -9977,24 +9966,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';
@@ -10818,9 +10796,9 @@ class BaseInput extends AuroElement$2$1 {
         if (!this.shadowRoot.contains(this.getActiveElement())) {
           this.validation.validate(this);
         }
-      }
 
-      this.notifyValueChanged();
+        this.notifyValueChanged();
+      }
     }
 
     if (changedProperties.has('error')) {
@@ -10945,9 +10923,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();
   }
 
   /**
@@ -11042,20 +11020,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
@@ -16399,7 +16370,7 @@ class AuroCombobox extends AuroElement {
     });
 
     this.menu.addEventListener('auroMenu-selectValueReset', () => {
-      this.clear();
+      this.reset();
     });
   }
 
@@ -16419,7 +16390,7 @@ class AuroCombobox extends AuroElement {
     });
 
     /**
-     * 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) {
@@ -16624,16 +16595,7 @@ class AuroCombobox extends AuroElement {
    */
   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;
   }
 
@@ -16659,7 +16621,7 @@ class AuroCombobox extends AuroElement {
           this.hideBib();
         }
       } else {
-        this.clear();
+        this.reset();
       }
     }