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

package/CHANGELOG.md

@@ -1,22 +1,9 @@
-# [5.1.0-rc-1044.1](https://github.com/AlaskaAirlines/auro-formkit/compare/v5.0.0...v5.1.0-rc-1044.1) (2025-08-05)
+## [5.1.1](https://github.com/AlaskaAirlines/auro-formkit/compare/v5.1.0...v5.1.1) (2025-07-29)
 
 
 ### Bug Fixes
 
-* fire only one `auroFormElement-validated` per validation [#878](https://github.com/AlaskaAirlines/auro-formkit/issues/878) ([7894538](https://github.com/AlaskaAirlines/auro-formkit/commit/7894538dc18872c06565ddd7b4cdd978f628a995))
-* handle empty radio groups [#1039](https://github.com/AlaskaAirlines/auro-formkit/issues/1039) ([d4effb9](https://github.com/AlaskaAirlines/auro-formkit/commit/d4effb999da791d22efa200ccd2a210b563425da))
-* menu doesn't show when typing character the first time ([b71f691](https://github.com/AlaskaAirlines/auro-formkit/commit/b71f691f0ca4dcc043d9fbdd37d462d4318e981e))
-* mis-alignment on checkmark with `text-align: center | right` ([6e1abc8](https://github.com/AlaskaAirlines/auro-formkit/commit/6e1abc8182ab8fbae63061a2e27c9ed4a88d2863))
-* prevent the alignment breakage from inherited text-align style [#880](https://github.com/AlaskaAirlines/auro-formkit/issues/880) ([3e14b4e](https://github.com/AlaskaAirlines/auro-formkit/commit/3e14b4e8a9c9e3ffb2d6f874fd80f6896b64a028))
-* refactor focus detection to not rely on document.activeElement [#1042](https://github.com/AlaskaAirlines/auro-formkit/issues/1042) ([5d841ce](https://github.com/AlaskaAirlines/auro-formkit/commit/5d841ce1122f272d4b4b92af174b52441febe3fc))
-* toggle checkbox with Space key [#1016](https://github.com/AlaskaAirlines/auro-formkit/issues/1016) ([2f2f339](https://github.com/AlaskaAirlines/auro-formkit/commit/2f2f339c72c6ac8d537da054309d8a6b0ad401ff))
 * try/catch DOMParser ([111bb76](https://github.com/AlaskaAirlines/auro-formkit/commit/111bb764d9a342d0d8c0b6627832f900d56cdb11))
-* update combobox input background color ([82a21f0](https://github.com/AlaskaAirlines/auro-formkit/commit/82a21f08e7d6711d1ad2afd0b495c220caa3d7e3))
-
-
-### Features
-
-* rotate chevron when dropdown bib toggles [#965](https://github.com/AlaskaAirlines/auro-formkit/issues/965) ([5f96983](https://github.com/AlaskaAirlines/auro-formkit/commit/5f9698329aacbaeb8ced107f87246e09f4142e88))
 
 ### Changelog
 

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

@@ -129,7 +129,6 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
   }
 };
 
-/* eslint-disable max-lines */
 // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
@@ -368,33 +367,6 @@ class AuroCheckbox extends i$2 {
     });
   }
 
-  connectedCallback() {
-    super.connectedCallback();
-
-    this.handleKeyDown = this.handleKeyDown.bind(this);
-    this.addEventListener('keydown', this.handleKeyDown);
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-
-    this.removeEventListener('keydown', this.handleKeyDown);
-  }
-
-  /**
-   * Handles keydown event to toggle the checkbox with Space key.
-   * @private
-   * @param {KeyboardEvent} event - The keydown event from the checkbox input.
-   * @returns {void}
-   */
-  handleKeyDown(event) {
-    if (event.key === ' ' && !this.disabled) {
-      event.preventDefault();
-
-      this.shadowRoot.querySelector('input').click();
-    }
-  }
-
   /**
    * @private
    * @returns {HTMLElement}
@@ -1160,16 +1132,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
+        }
+      }));
+    }
   }
 
   /**

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

@@ -121,7 +121,6 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
   }
 };
 
-/* eslint-disable max-lines */
 // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
@@ -360,33 +359,6 @@ class AuroCheckbox extends i$2 {
     });
   }
 
-  connectedCallback() {
-    super.connectedCallback();
-
-    this.handleKeyDown = this.handleKeyDown.bind(this);
-    this.addEventListener('keydown', this.handleKeyDown);
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-
-    this.removeEventListener('keydown', this.handleKeyDown);
-  }
-
-  /**
-   * Handles keydown event to toggle the checkbox with Space key.
-   * @private
-   * @param {KeyboardEvent} event - The keydown event from the checkbox input.
-   * @returns {void}
-   */
-  handleKeyDown(event) {
-    if (event.key === ' ' && !this.disabled) {
-      event.preventDefault();
-
-      this.shadowRoot.querySelector('input').click();
-    }
-  }
-
   /**
    * @private
    * @returns {HTMLElement}
@@ -1152,16 +1124,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
+        }
+      }));
+    }
   }
 
   /**

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

@@ -127,13 +127,6 @@ export class AuroCheckbox extends LitElement {
     reset(): void;
     firstUpdated(): void;
     inputId: string;
-    /**
-     * Handles keydown event to toggle the checkbox with Space key.
-     * @private
-     * @param {KeyboardEvent} event - The keydown event from the checkbox input.
-     * @returns {void}
-     */
-    private handleKeyDown;
     /**
      * @private
      * @returns {HTMLElement}

package/components/checkbox/dist/index.js

@@ -81,7 +81,6 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
   }
 };
 
-/* eslint-disable max-lines */
 // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
@@ -320,33 +319,6 @@ class AuroCheckbox extends LitElement {
     });
   }
 
-  connectedCallback() {
-    super.connectedCallback();
-
-    this.handleKeyDown = this.handleKeyDown.bind(this);
-    this.addEventListener('keydown', this.handleKeyDown);
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-
-    this.removeEventListener('keydown', this.handleKeyDown);
-  }
-
-  /**
-   * Handles keydown event to toggle the checkbox with Space key.
-   * @private
-   * @param {KeyboardEvent} event - The keydown event from the checkbox input.
-   * @returns {void}
-   */
-  handleKeyDown(event) {
-    if (event.key === ' ' && !this.disabled) {
-      event.preventDefault();
-
-      this.shadowRoot.querySelector('input').click();
-    }
-  }
-
   /**
    * @private
    * @returns {HTMLElement}
@@ -1105,16 +1077,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
+        }
+      }));
+    }
   }
 
   /**

package/components/checkbox/dist/registered.js

@@ -81,7 +81,6 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
   }
 };
 
-/* eslint-disable max-lines */
 // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
@@ -320,33 +319,6 @@ class AuroCheckbox extends LitElement {
     });
   }
 
-  connectedCallback() {
-    super.connectedCallback();
-
-    this.handleKeyDown = this.handleKeyDown.bind(this);
-    this.addEventListener('keydown', this.handleKeyDown);
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-
-    this.removeEventListener('keydown', this.handleKeyDown);
-  }
-
-  /**
-   * Handles keydown event to toggle the checkbox with Space key.
-   * @private
-   * @param {KeyboardEvent} event - The keydown event from the checkbox input.
-   * @returns {void}
-   */
-  handleKeyDown(event) {
-    if (event.key === ' ' && !this.disabled) {
-      event.preventDefault();
-
-      this.shadowRoot.querySelector('input').click();
-    }
-  }
-
   /**
    * @private
    * @returns {HTMLElement}
@@ -1105,16 +1077,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
+        }
+      }));
+    }
   }
 
   /**

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

@@ -1040,16 +1040,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
+        }
+      }));
+    }
   }
 
   /**
@@ -4505,14 +4505,6 @@ let AuroElement$4 = 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');
 
@@ -10263,16 +10255,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
+        }
+      }));
+    }
   }
 
   /**
@@ -10364,14 +10356,6 @@ let AuroElement$2$1 = 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');
 
@@ -15801,7 +15785,7 @@ class AuroBibtemplate extends i$2 {
 
 var bibTemplateVersion = '1.0.0';
 
-var styleCss$4 = i$5`.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$4 = i$5`.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 = i$5`:host([layout*=emphasized][shape*=pill]) [auro-input]{width:100%}:host([layout*=emphasized][shape*=pill]) [auro-input]::part(inputHelpText){display:none}`;
 
@@ -15841,14 +15825,6 @@ let AuroElement$1 = 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');
 
@@ -16674,7 +16650,7 @@ class AuroCombobox extends AuroElement$1 {
 
       // 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);
@@ -16839,16 +16815,13 @@ class AuroCombobox extends AuroElement$1 {
      * 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;
     });
   }
@@ -16919,7 +16892,7 @@ class AuroCombobox extends AuroElement$1 {
     this.handleMenuOptions();
 
     // Validate only if the value was set programmatically
-    if (!this.componentHasFocus) {
+    if (document.activeElement !== this) {
       this.validate();
     }
 
@@ -16959,7 +16932,7 @@ class AuroCombobox extends AuroElement$1 {
           }
         } else {
           setTimeout(() => {
-            if (!this.componentHasFocus) {
+            if (document.activeElement !== this) {
               this.hideBib();
             }
           }, 0);
@@ -17080,7 +17053,7 @@ class AuroCombobox extends AuroElement$1 {
     }
 
     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/demo/index.min.js

@@ -898,16 +898,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
+        }
+      }));
+    }
   }
 
   /**
@@ -4363,14 +4363,6 @@ let AuroElement$4 = 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');
 
@@ -10121,16 +10113,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
+        }
+      }));
+    }
   }
 
   /**
@@ -10222,14 +10214,6 @@ let AuroElement$2$1 = 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');
 
@@ -15659,7 +15643,7 @@ class AuroBibtemplate extends i$2 {
 
 var bibTemplateVersion = '1.0.0';
 
-var styleCss$4 = i$5`.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$4 = i$5`.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 = i$5`:host([layout*=emphasized][shape*=pill]) [auro-input]{width:100%}:host([layout*=emphasized][shape*=pill]) [auro-input]::part(inputHelpText){display:none}`;
 
@@ -15699,14 +15683,6 @@ let AuroElement$1 = 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');
 
@@ -16532,7 +16508,7 @@ class AuroCombobox extends AuroElement$1 {
 
       // 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);
@@ -16697,16 +16673,13 @@ class AuroCombobox extends AuroElement$1 {
      * 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;
     });
   }
@@ -16777,7 +16750,7 @@ class AuroCombobox extends AuroElement$1 {
     this.handleMenuOptions();
 
     // Validate only if the value was set programmatically
-    if (!this.componentHasFocus) {
+    if (document.activeElement !== this) {
       this.validate();
     }
 
@@ -16817,7 +16790,7 @@ class AuroCombobox extends AuroElement$1 {
           }
         } else {
           setTimeout(() => {
-            if (!this.componentHasFocus) {
+            if (document.activeElement !== this) {
               this.hideBib();
             }
           }, 0);
@@ -16938,7 +16911,7 @@ class AuroCombobox extends AuroElement$1 {
     }
 
     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();