@aurodesignsystem/auro-formkit 5.1.0-rc-1014.1 → 5.1.0-rc-1044.1.1

package/CHANGELOG.md

@@ -1,12 +1,18 @@
-# [5.1.0-rc-1014.1](https://github.com/AlaskaAirlines/auro-formkit/compare/v5.0.0...v5.1.0-rc-1014.1) (2025-07-28)
+# [5.1.0-rc-1044.1.1](https://github.com/AlaskaAirlines/auro-formkit/compare/v5.0.0...v5.1.0-rc-1044.1.1) (2025-08-05)
 
 
 ### Bug Fixes
 
+* correct token color for combobox background ([e9220a9](https://github.com/AlaskaAirlines/auro-formkit/commit/e9220a98edcca3c80f9c07f504fb4783b21e55e7))
+* 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

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

@@ -129,6 +129,7 @@ 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.
 
@@ -367,6 +368,33 @@ 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}
@@ -1132,16 +1160,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,6 +121,7 @@ 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.
 
@@ -359,6 +360,33 @@ 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}
@@ -1124,16 +1152,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,6 +127,13 @@ 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,6 +81,7 @@ 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.
 
@@ -319,6 +320,33 @@ 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}
@@ -1077,16 +1105,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,6 +81,7 @@ 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.
 
@@ -319,6 +320,33 @@ 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}
@@ -1077,16 +1105,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,6 +4505,14 @@ 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');
 
@@ -10255,16 +10263,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
+      }
+    }));
   }
 
   /**
@@ -10356,6 +10364,14 @@ 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');
 
@@ -15785,7 +15801,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-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 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;--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}`;
 
@@ -15825,6 +15841,14 @@ 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');
 
@@ -16650,7 +16674,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 (document.activeElement === this) {
+        if (this.componentHasFocus) {
           this.setInputFocus();
         }
       }, 0);
@@ -16815,13 +16839,16 @@ class AuroCombobox extends AuroElement$1 {
      * Validate every time we remove focus from the combo box.
      */
     this.addEventListener('focusout', () => {
-      if (document.activeElement !== this) {
+      if (!this.componentHasFocus) {
         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;
     });
   }
@@ -16892,7 +16919,7 @@ class AuroCombobox extends AuroElement$1 {
     this.handleMenuOptions();
 
     // Validate only if the value was set programmatically
-    if (document.activeElement !== this) {
+    if (!this.componentHasFocus) {
       this.validate();
     }
 
@@ -16932,7 +16959,7 @@ class AuroCombobox extends AuroElement$1 {
           }
         } else {
           setTimeout(() => {
-            if (document.activeElement !== this) {
+            if (!this.componentHasFocus) {
               this.hideBib();
             }
           }, 0);
@@ -17053,7 +17080,7 @@ class AuroCombobox extends AuroElement$1 {
     }
 
     if (changedProperties.has('availableOptions')) {
-      if (this.availableOptions && this.availableOptions.length > 0 && document.activeElement === this) {
+      if (this.availableOptions && this.availableOptions.length > 0 && this.componentHasFocus) {
         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,6 +4363,14 @@ 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');
 
@@ -10113,16 +10121,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
+      }
+    }));
   }
 
   /**
@@ -10214,6 +10222,14 @@ 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');
 
@@ -15643,7 +15659,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-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 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;--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}`;
 
@@ -15683,6 +15699,14 @@ 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');
 
@@ -16508,7 +16532,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 (document.activeElement === this) {
+        if (this.componentHasFocus) {
           this.setInputFocus();
         }
       }, 0);
@@ -16673,13 +16697,16 @@ class AuroCombobox extends AuroElement$1 {
      * Validate every time we remove focus from the combo box.
      */
     this.addEventListener('focusout', () => {
-      if (document.activeElement !== this) {
+      if (!this.componentHasFocus) {
         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;
     });
   }
@@ -16750,7 +16777,7 @@ class AuroCombobox extends AuroElement$1 {
     this.handleMenuOptions();
 
     // Validate only if the value was set programmatically
-    if (document.activeElement !== this) {
+    if (!this.componentHasFocus) {
       this.validate();
     }
 
@@ -16790,7 +16817,7 @@ class AuroCombobox extends AuroElement$1 {
           }
         } else {
           setTimeout(() => {
-            if (document.activeElement !== this) {
+            if (!this.componentHasFocus) {
               this.hideBib();
             }
           }, 0);
@@ -16911,7 +16938,7 @@ class AuroCombobox extends AuroElement$1 {
     }
 
     if (changedProperties.has('availableOptions')) {
-      if (this.availableOptions && this.availableOptions.length > 0 && document.activeElement === this) {
+      if (this.availableOptions && this.availableOptions.length > 0 && this.componentHasFocus) {
         this.showBib();
       } else {
         this.hideBib();