@aurodesignsystem/auro-formkit 5.1.0-rc-1044.1 → 5.1.1

package/components/combobox/dist/index.js

@@ -835,16 +835,16 @@ let AuroFormValidation$1 = class AuroFormValidation {
       }
 
       this.getErrorMessage(elem);
-    }
 
-    elem.dispatchEvent(new CustomEvent('auroFormElement-validated', {
-      bubbles: true,
-      composed: true,
-      detail: {
-        validity: elem.validity,
-        message: elem.errorMessage
-      }
-    }));
+      elem.dispatchEvent(new CustomEvent('auroFormElement-validated', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          validity: elem.validity,
+          message: elem.errorMessage
+        }
+      }));
+    }
   }
 
   /**
@@ -4294,14 +4294,6 @@ let AuroElement$4 = class AuroElement extends LitElement {
     };
   }
 
-  /**
-   * Returns true if the element has focus.
-   * @returns {boolean} - Returns true if the element has focus.
-   */
-  get componentHasFocus() {
-    return this.matches(':focus');
-  }
-
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 
@@ -10039,16 +10031,16 @@ class AuroFormValidation {
       }
 
       this.getErrorMessage(elem);
-    }
 
-    elem.dispatchEvent(new CustomEvent('auroFormElement-validated', {
-      bubbles: true,
-      composed: true,
-      detail: {
-        validity: elem.validity,
-        message: elem.errorMessage
-      }
-    }));
+      elem.dispatchEvent(new CustomEvent('auroFormElement-validated', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          validity: elem.validity,
+          message: elem.errorMessage
+        }
+      }));
+    }
   }
 
   /**
@@ -10140,14 +10132,6 @@ let AuroElement$2$1 = class AuroElement extends LitElement {
     };
   }
 
-  /**
-   * Returns true if the element has focus.
-   * @returns {boolean} - Returns true if the element has focus.
-   */
-  get componentHasFocus() {
-    return this.matches(':focus');
-  }
-
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 
@@ -15577,7 +15561,7 @@ class AuroBibtemplate extends LitElement {
 
 var bibTemplateVersion = '1.0.0';
 
-var styleCss$1 = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-input]{--ds-auro-input-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host #inputInBib::part(accent-right){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
+var styleCss$1 = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-input]{--ds-auro-input-container-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host #inputInBib::part(accent-right){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
 
 var styleEmphasizedCss = css`:host([layout*=emphasized][shape*=pill]) [auro-input]{width:100%}:host([layout*=emphasized][shape*=pill]) [auro-input]::part(inputHelpText){display:none}`;
 
@@ -15617,14 +15601,6 @@ class AuroElement extends LitElement {
     };
   }
 
-  /**
-   * Returns true if the element has focus.
-   * @returns {boolean} - Returns true if the element has focus.
-   */
-  get componentHasFocus() {
-    return this.matches(':focus');
-  }
-
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 
@@ -16450,7 +16426,7 @@ class AuroCombobox extends AuroElement {
 
       // wait a frame in case the bib gets hide immediately after showing because there is no value
       setTimeout(() => {
-        if (this.componentHasFocus) {
+        if (document.activeElement === this) {
           this.setInputFocus();
         }
       }, 0);
@@ -16615,16 +16591,13 @@ class AuroCombobox extends AuroElement {
      * Validate every time we remove focus from the combo box.
      */
     this.addEventListener('focusout', () => {
-      if (!this.componentHasFocus) {
+      if (document.activeElement !== this) {
         this.validate();
       }
     });
 
     // Handle validation messages from auroFormElement-validated event
     this.input.addEventListener('auroFormElement-validated', (evt) => {
-      // not to bubble up input's validated event.
-      evt.stopPropagation();
-
       this.errorMessage = evt.detail.message;
     });
   }
@@ -16695,7 +16668,7 @@ class AuroCombobox extends AuroElement {
     this.handleMenuOptions();
 
     // Validate only if the value was set programmatically
-    if (!this.componentHasFocus) {
+    if (document.activeElement !== this) {
       this.validate();
     }
 
@@ -16735,7 +16708,7 @@ class AuroCombobox extends AuroElement {
           }
         } else {
           setTimeout(() => {
-            if (!this.componentHasFocus) {
+            if (document.activeElement !== this) {
               this.hideBib();
             }
           }, 0);
@@ -16856,7 +16829,7 @@ class AuroCombobox extends AuroElement {
     }
 
     if (changedProperties.has('availableOptions')) {
-      if (this.availableOptions && this.availableOptions.length > 0 && this.componentHasFocus) {
+      if (this.availableOptions && this.availableOptions.length > 0 && document.activeElement === this) {
         this.showBib();
       } else {
         this.hideBib();

package/components/combobox/dist/registered.js

@@ -835,16 +835,16 @@ let AuroFormValidation$1 = class AuroFormValidation {
       }
 
       this.getErrorMessage(elem);
-    }
 
-    elem.dispatchEvent(new CustomEvent('auroFormElement-validated', {
-      bubbles: true,
-      composed: true,
-      detail: {
-        validity: elem.validity,
-        message: elem.errorMessage
-      }
-    }));
+      elem.dispatchEvent(new CustomEvent('auroFormElement-validated', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          validity: elem.validity,
+          message: elem.errorMessage
+        }
+      }));
+    }
   }
 
   /**
@@ -4294,14 +4294,6 @@ let AuroElement$4 = class AuroElement extends LitElement {
     };
   }
 
-  /**
-   * Returns true if the element has focus.
-   * @returns {boolean} - Returns true if the element has focus.
-   */
-  get componentHasFocus() {
-    return this.matches(':focus');
-  }
-
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 
@@ -10039,16 +10031,16 @@ class AuroFormValidation {
       }
 
       this.getErrorMessage(elem);
-    }
 
-    elem.dispatchEvent(new CustomEvent('auroFormElement-validated', {
-      bubbles: true,
-      composed: true,
-      detail: {
-        validity: elem.validity,
-        message: elem.errorMessage
-      }
-    }));
+      elem.dispatchEvent(new CustomEvent('auroFormElement-validated', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          validity: elem.validity,
+          message: elem.errorMessage
+        }
+      }));
+    }
   }
 
   /**
@@ -10140,14 +10132,6 @@ let AuroElement$2$1 = class AuroElement extends LitElement {
     };
   }
 
-  /**
-   * Returns true if the element has focus.
-   * @returns {boolean} - Returns true if the element has focus.
-   */
-  get componentHasFocus() {
-    return this.matches(':focus');
-  }
-
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 
@@ -15577,7 +15561,7 @@ class AuroBibtemplate extends LitElement {
 
 var bibTemplateVersion = '1.0.0';
 
-var styleCss$1 = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-input]{--ds-auro-input-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host #inputInBib::part(accent-right){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
+var styleCss$1 = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-input]{--ds-auro-input-container-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host #inputInBib::part(accent-right){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
 
 var styleEmphasizedCss = css`:host([layout*=emphasized][shape*=pill]) [auro-input]{width:100%}:host([layout*=emphasized][shape*=pill]) [auro-input]::part(inputHelpText){display:none}`;
 
@@ -15617,14 +15601,6 @@ class AuroElement extends LitElement {
     };
   }
 
-  /**
-   * Returns true if the element has focus.
-   * @returns {boolean} - Returns true if the element has focus.
-   */
-  get componentHasFocus() {
-    return this.matches(':focus');
-  }
-
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 
@@ -16450,7 +16426,7 @@ class AuroCombobox extends AuroElement {
 
       // wait a frame in case the bib gets hide immediately after showing because there is no value
       setTimeout(() => {
-        if (this.componentHasFocus) {
+        if (document.activeElement === this) {
           this.setInputFocus();
         }
       }, 0);
@@ -16615,16 +16591,13 @@ class AuroCombobox extends AuroElement {
      * Validate every time we remove focus from the combo box.
      */
     this.addEventListener('focusout', () => {
-      if (!this.componentHasFocus) {
+      if (document.activeElement !== this) {
         this.validate();
       }
     });
 
     // Handle validation messages from auroFormElement-validated event
     this.input.addEventListener('auroFormElement-validated', (evt) => {
-      // not to bubble up input's validated event.
-      evt.stopPropagation();
-
       this.errorMessage = evt.detail.message;
     });
   }
@@ -16695,7 +16668,7 @@ class AuroCombobox extends AuroElement {
     this.handleMenuOptions();
 
     // Validate only if the value was set programmatically
-    if (!this.componentHasFocus) {
+    if (document.activeElement !== this) {
       this.validate();
     }
 
@@ -16735,7 +16708,7 @@ class AuroCombobox extends AuroElement {
           }
         } else {
           setTimeout(() => {
-            if (!this.componentHasFocus) {
+            if (document.activeElement !== this) {
               this.hideBib();
             }
           }, 0);
@@ -16856,7 +16829,7 @@ class AuroCombobox extends AuroElement {
     }
 
     if (changedProperties.has('availableOptions')) {
-      if (this.availableOptions && this.availableOptions.length > 0 && this.componentHasFocus) {
+      if (this.availableOptions && this.availableOptions.length > 0 && document.activeElement === this) {
         this.showBib();
       } else {
         this.hideBib();

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

@@ -2423,16 +2423,16 @@ class AuroFormValidation {
       }
 
       this.getErrorMessage(elem);
-    }
 
-    elem.dispatchEvent(new CustomEvent('auroFormElement-validated', {
-      bubbles: true,
-      composed: true,
-      detail: {
-        validity: elem.validity,
-        message: elem.errorMessage
-      }
-    }));
+      elem.dispatchEvent(new CustomEvent('auroFormElement-validated', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          validity: elem.validity,
+          message: elem.errorMessage
+        }
+      }));
+    }
   }
 
   /**
@@ -6526,14 +6526,6 @@ let AuroElement$3 = class AuroElement extends i$2 {
     };
   }
 
-  /**
-   * Returns true if the element has focus.
-   * @returns {boolean} - Returns true if the element has focus.
-   */
-  get componentHasFocus() {
-    return this.matches(':focus');
-  }
-
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 
@@ -9518,14 +9510,6 @@ class AuroElement extends i$2 {
     };
   }
 
-  /**
-   * Returns true if the element has focus.
-   * @returns {boolean} - Returns true if the element has focus.
-   */
-  get componentHasFocus() {
-    return this.matches(':focus');
-  }
-
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 

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

@@ -2423,16 +2423,16 @@ class AuroFormValidation {
       }
 
       this.getErrorMessage(elem);
-    }
 
-    elem.dispatchEvent(new CustomEvent('auroFormElement-validated', {
-      bubbles: true,
-      composed: true,
-      detail: {
-        validity: elem.validity,
-        message: elem.errorMessage
-      }
-    }));
+      elem.dispatchEvent(new CustomEvent('auroFormElement-validated', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          validity: elem.validity,
+          message: elem.errorMessage
+        }
+      }));
+    }
   }
 
   /**
@@ -6526,14 +6526,6 @@ let AuroElement$3 = class AuroElement extends i$2 {
     };
   }
 
-  /**
-   * Returns true if the element has focus.
-   * @returns {boolean} - Returns true if the element has focus.
-   */
-  get componentHasFocus() {
-    return this.matches(':focus');
-  }
-
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 
@@ -9518,14 +9510,6 @@ class AuroElement extends i$2 {
     };
   }
 
-  /**
-   * Returns true if the element has focus.
-   * @returns {boolean} - Returns true if the element has focus.
-   */
-  get componentHasFocus() {
-    return this.matches(':focus');
-  }
-
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 

package/components/counter/dist/index.js

@@ -2376,16 +2376,16 @@ class AuroFormValidation {
       }
 
       this.getErrorMessage(elem);
-    }
 
-    elem.dispatchEvent(new CustomEvent('auroFormElement-validated', {
-      bubbles: true,
-      composed: true,
-      detail: {
-        validity: elem.validity,
-        message: elem.errorMessage
-      }
-    }));
+      elem.dispatchEvent(new CustomEvent('auroFormElement-validated', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          validity: elem.validity,
+          message: elem.errorMessage
+        }
+      }));
+    }
   }
 
   /**
@@ -6479,14 +6479,6 @@ let AuroElement$3 = class AuroElement extends LitElement {
     };
   }
 
-  /**
-   * Returns true if the element has focus.
-   * @returns {boolean} - Returns true if the element has focus.
-   */
-  get componentHasFocus() {
-    return this.matches(':focus');
-  }
-
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 
@@ -9471,14 +9463,6 @@ class AuroElement extends LitElement {
     };
   }
 
-  /**
-   * Returns true if the element has focus.
-   * @returns {boolean} - Returns true if the element has focus.
-   */
-  get componentHasFocus() {
-    return this.matches(':focus');
-  }
-
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 

package/components/counter/dist/registered.js

@@ -2376,16 +2376,16 @@ class AuroFormValidation {
       }
 
       this.getErrorMessage(elem);
-    }
 
-    elem.dispatchEvent(new CustomEvent('auroFormElement-validated', {
-      bubbles: true,
-      composed: true,
-      detail: {
-        validity: elem.validity,
-        message: elem.errorMessage
-      }
-    }));
+      elem.dispatchEvent(new CustomEvent('auroFormElement-validated', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          validity: elem.validity,
+          message: elem.errorMessage
+        }
+      }));
+    }
   }
 
   /**
@@ -6479,14 +6479,6 @@ let AuroElement$3 = class AuroElement extends LitElement {
     };
   }
 
-  /**
-   * Returns true if the element has focus.
-   * @returns {boolean} - Returns true if the element has focus.
-   */
-  get componentHasFocus() {
-    return this.matches(':focus');
-  }
-
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 
@@ -9471,14 +9463,6 @@ class AuroElement extends LitElement {
     };
   }
 
-  /**
-   * Returns true if the element has focus.
-   * @returns {boolean} - Returns true if the element has focus.
-   */
-  get componentHasFocus() {
-    return this.matches(':focus');
-  }
-
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 

package/components/datepicker/demo/api.md

@@ -12,7 +12,6 @@
 | [calendarFocusDate](#calendarFocusDate)               | `calendarFocusDate`               |           | `string`   | "value"                                          | The date that will first be visually rendered to the user in the calendar. |
 | [calendarStartDate](#calendarStartDate)               | `calendarStartDate`               |           | `string`   | "undefined"                                      | The first date that may be displayed in the calendar. |
 | [centralDate](#centralDate)                     | `centralDate`                     |           | `string`   |                                                  | The date that determines the currently visible month. |
-| [componentHasFocus](#componentHasFocus)               |                                   | readonly  | `boolean`  |                                                  | Returns true if the element has focus.           |
 | [disabled](#disabled)                        | `disabled`                        |           | `boolean`  | false                                            | If set, disables the datepicker.                 |
 | [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`. |

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

@@ -1075,16 +1075,16 @@ let AuroFormValidation$1 = class AuroFormValidation {
       }
 
       this.getErrorMessage(elem);
-    }
 
-    elem.dispatchEvent(new CustomEvent('auroFormElement-validated', {
-      bubbles: true,
-      composed: true,
-      detail: {
-        validity: elem.validity,
-        message: elem.errorMessage
-      }
-    }));
+      elem.dispatchEvent(new CustomEvent('auroFormElement-validated', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          validity: elem.validity,
+          message: elem.errorMessage
+        }
+      }));
+    }
   }
 
   /**
@@ -17947,14 +17947,6 @@ let AuroElement$4 = class AuroElement extends i {
     };
   }
 
-  /**
-   * Returns true if the element has focus.
-   * @returns {boolean} - Returns true if the element has focus.
-   */
-  get componentHasFocus() {
-    return this.matches(':focus');
-  }
-
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 
@@ -23705,16 +23697,16 @@ class AuroFormValidation {
       }
 
       this.getErrorMessage(elem);
-    }
 
-    elem.dispatchEvent(new CustomEvent('auroFormElement-validated', {
-      bubbles: true,
-      composed: true,
-      detail: {
-        validity: elem.validity,
-        message: elem.errorMessage
-      }
-    }));
+      elem.dispatchEvent(new CustomEvent('auroFormElement-validated', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          validity: elem.validity,
+          message: elem.errorMessage
+        }
+      }));
+    }
   }
 
   /**
@@ -23806,14 +23798,6 @@ let AuroElement$2 = class AuroElement extends i {
     };
   }
 
-  /**
-   * Returns true if the element has focus.
-   * @returns {boolean} - Returns true if the element has focus.
-   */
-  get componentHasFocus() {
-    return this.matches(':focus');
-  }
-
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 
@@ -27542,14 +27526,6 @@ let AuroElement$1 = class AuroElement extends i {
     };
   }
 
-  /**
-   * Returns true if the element has focus.
-   * @returns {boolean} - Returns true if the element has focus.
-   */
-  get componentHasFocus() {
-    return this.matches(':focus');
-  }
-
   resetShapeClasses() {
     const wrapper = this.shadowRoot.querySelector('.wrapper');
 
@@ -28806,9 +28782,6 @@ class AuroDatePicker extends AuroElement$1 {
       });
 
       input.addEventListener('auroFormElement-validated', (evt) => {
-        // not to bubble up input's validated event.
-        evt.stopPropagation();
-
         if (evt.detail.validity === 'customError') {
           this.validity = evt.detail.validity;
           this.errorMessage = evt.detail.message;
@@ -29146,6 +29119,7 @@ class AuroDatePicker extends AuroElement$1 {
       }
 
       this.setHasValue();
+      this.validate();
     }
 
     if (changedProperties.has('valueEnd') && this.inputList[1]) {