@aurodesignsystem/auro-formkit 5.7.0 → 5.8.0

package/CHANGELOG.md

@@ -1,33 +1,23 @@
-# [5.7.0](https://github.com/AlaskaAirlines/auro-formkit/compare/v5.6.0...v5.7.0) (2025-10-20)
+# [5.8.0](https://github.com/AlaskaAirlines/auro-formkit/compare/v5.7.0...v5.8.0) (2025-10-31)
 
 
 ### Bug Fixes
 
-* [#1159](https://github.com/AlaskaAirlines/auro-formkit/issues/1159) - restore calendar scrolling when value is updated ([8439358](https://github.com/AlaskaAirlines/auro-formkit/commit/84393582a6c7ae1d77fcfda4fe855c9193c55611))
-* make clear button in classic layout accessible [#1165](https://github.com/AlaskaAirlines/auro-formkit/issues/1165) ([36cf97f](https://github.com/AlaskaAirlines/auro-formkit/commit/36cf97f227521c3be8c931adfc2d3cc5b2dc6222))
-* restore double click to input select behavior [#1174](https://github.com/AlaskaAirlines/auro-formkit/issues/1174) ([e83ff8f](https://github.com/AlaskaAirlines/auro-formkit/commit/e83ff8f6bd20bc5dfd2027824aca726f16ba9d11))
-* update radio-group to validate radios with non-string value properly [#1168](https://github.com/AlaskaAirlines/auro-formkit/issues/1168) ([37896ba](https://github.com/AlaskaAirlines/auro-formkit/commit/37896bad70999241ece3daa846eec26cc12d47eb))
+* add outline color to error border in datepicker [#1189](https://github.com/AlaskaAirlines/auro-formkit/issues/1189) ([cda56f1](https://github.com/AlaskaAirlines/auro-formkit/commit/cda56f13e3129554f552304551bf13310183803d))
+* add outline color to error border in select [#1189](https://github.com/AlaskaAirlines/auro-formkit/issues/1189) ([13e4038](https://github.com/AlaskaAirlines/auro-formkit/commit/13e4038db850c0683149a15687786bd63fdee575))
+* adjust vertical alignment for buttons and quantity label in auro counterto match figma designs [#1173](https://github.com/AlaskaAirlines/auro-formkit/issues/1173) ([cb61272](https://github.com/AlaskaAirlines/auro-formkit/commit/cb61272dafcdc70af93e2c061982462a9266e4c7))
+* combo box now correctly captures floated validation messages from input ([f86b87a](https://github.com/AlaskaAirlines/auro-formkit/commit/f86b87a4d7d9e15101bc9fdc51fce65759f77d4f))
+* combo box now correctly syncs its validity state with input when input validity is updated ([44c3ffd](https://github.com/AlaskaAirlines/auro-formkit/commit/44c3ffdb369681d5c8a6d49b8627dd9a0d518ff2))
+* replace incorrect `elem.persistValue` reference with correct `elem.persistInput` ([47eb89c](https://github.com/AlaskaAirlines/auro-formkit/commit/47eb89cc8e293e6ead96b0ff98e097613fc7fafd))
+* resolve layout issue with snowflake layout when input is errored and the user hovers ([111c28c](https://github.com/AlaskaAirlines/auro-formkit/commit/111c28cc18ff645e2f238cb1eb19663a4f0ed31c))
+* value of input is now correctly checked when `persistInput` is not set on combo boxes ([a845ac9](https://github.com/AlaskaAirlines/auro-formkit/commit/a845ac9ea280d6bc57a443aa83a08187e4e06699))
 
 
 ### Features
 
-* add `appearance` deprecate `ondark` on checkbox [#1153](https://github.com/AlaskaAirlines/auro-formkit/issues/1153) ([5f82d07](https://github.com/AlaskaAirlines/auro-formkit/commit/5f82d07fcd34eb5a83bf0fadc62a043db5c39f30))
-* add `appearance` deprecate `ondark` on combobox [#1149](https://github.com/AlaskaAirlines/auro-formkit/issues/1149) ([6fefa6d](https://github.com/AlaskaAirlines/auro-formkit/commit/6fefa6ddbc4689d0267a1a4d3f909ab6d8321a1a))
-* add `appearance` deprecate `ondark` on counter [#1151](https://github.com/AlaskaAirlines/auro-formkit/issues/1151) ([eb5bf05](https://github.com/AlaskaAirlines/auro-formkit/commit/eb5bf053ae6af695649ce061b75ef9fe0e367271))
-* add `appearance` deprecate `ondark` on datepicker [#1150](https://github.com/AlaskaAirlines/auro-formkit/issues/1150) ([d769459](https://github.com/AlaskaAirlines/auro-formkit/commit/d769459531128637b8adb2c8b890a00d779a73ea))
-* add `appearance` deprecate `ondark` on dropdown [#1147](https://github.com/AlaskaAirlines/auro-formkit/issues/1147) ([9ba364a](https://github.com/AlaskaAirlines/auro-formkit/commit/9ba364ab41c8d7db5c046affa67b6722d8712e97))
-* add `appearance` deprecate `ondark` on input [#1148](https://github.com/AlaskaAirlines/auro-formkit/issues/1148) ([82a63a8](https://github.com/AlaskaAirlines/auro-formkit/commit/82a63a80248a4433bafcc96d1d80a0eaec974f10))
-* add `appearance` deprecate `ondark` on radio [#1154](https://github.com/AlaskaAirlines/auro-formkit/issues/1154) ([b8279ec](https://github.com/AlaskaAirlines/auro-formkit/commit/b8279ec6ac5093faccdbc66dbd7e7ccba98583b2))
-* add `appearance` deprecate `ondark` on select [#1152](https://github.com/AlaskaAirlines/auro-formkit/issues/1152) ([e7f6938](https://github.com/AlaskaAirlines/auro-formkit/commit/e7f69388efb0228e9f00abd91789ea4a5d1e0e88))
-* add slots for custom aria-labels in counter [#1163](https://github.com/AlaskaAirlines/auro-formkit/issues/1163) ([8d9b313](https://github.com/AlaskaAirlines/auro-formkit/commit/8d9b313a6dea83bb2519006c134d87533466b9a1))
-* add slots for custom aria-labels in datepicker [#1164](https://github.com/AlaskaAirlines/auro-formkit/issues/1164) ([4059bec](https://github.com/AlaskaAirlines/auro-formkit/commit/4059bec0dc0ce13fbd22c70a37575e3004e405a1))
-
-
-### Performance Improvements
-
-* update `auro-button` and `auro-icon` ([c035d79](https://github.com/AlaskaAirlines/auro-formkit/commit/c035d79bd499e384442f756ac089b25935080f03))
-* update auro-button import paths ([7dd3b66](https://github.com/AlaskaAirlines/auro-formkit/commit/7dd3b6603cf5e3f9385ee2a81a5833085cea6dcc))
-* update to latest dependencies ([b62f1bb](https://github.com/AlaskaAirlines/auro-formkit/commit/b62f1bbe653944ed0187aa4fe234d4896cbe6eb9))
+* [#680](https://github.com/AlaskaAirlines/auro-formkit/issues/680) add reference dates functionality to datepicker component ([09399ec](https://github.com/AlaskaAirlines/auro-formkit/commit/09399ec2509b7f5cdddd83ccf04465a4b67e4561))
+* add filter behavior to combo box ([10f627b](https://github.com/AlaskaAirlines/auro-formkit/commit/10f627b9e83de9e8e50b6344665074e0a2ddf07c))
+* hide legened element if legned slot is not being set and the required attribute is true [#1143](https://github.com/AlaskaAirlines/auro-formkit/issues/1143) ([dbf447f](https://github.com/AlaskaAirlines/auro-formkit/commit/dbf447fb46c212e285d0dea693bab5900068d080))
 
 ### Changelog
 

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

@@ -969,6 +969,52 @@ class AuroFormValidation {
             message: e => e.getAttribute('setCustomValidityRangeUnderflow') || ''
           }
         ]
+      },
+      combobox: {
+        filter: [
+          {
+            check: (e) => {
+
+              // Guard Clause: If the behavior is not 'filter', skip this validation
+              if (e.behavior !== 'filter') return false;
+
+              // Get the current input value
+              const currentInputValue = e.input.value;
+
+              // Skip validation if the input has no value
+              if (!currentInputValue) return false;
+
+              /**
+               * Let's check if the option selected and combobox value match.
+               */
+
+              // Guard Clause: If there is no option selected fail the validation
+              if (!e.optionSelected) return true;
+
+              // Guard Clause: If there is no value fail the validation
+              if (!e.value) return true;
+
+              // Guard Clause: If the selected option's value doesn't match the input value fail the validation
+              if (e.optionSelected.value !== e.value) return true;
+
+              /**
+               * Now let's make sure the user hasn't change the value in the input after selecting an option.
+               * This is to make sure there's no user confusion if they select an option but then change the value to something else.
+               */
+
+              // Guard Clause: If the current input value doesn't match the option selected value fail the validation
+              if (currentInputValue && currentInputValue !== e.optionSelected.value) return true;
+
+              // Guard Clause: If the current input value doesn't match the combobox value fail the validation
+              if (currentInputValue && currentInputValue !== e.value) return true;
+
+              // If all the checks passed the validation passes
+              return false;
+            },
+            validity: 'valueMissing',
+            message: e => e.getAttribute('setCustomValidityValueMissingFilter') || e.setCustomValidity || ''
+          }
+        ] 
       }
     };
 
@@ -977,6 +1023,8 @@ class AuroFormValidation {
       elementType = 'input';
     } else if (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group')) {
       elementType = 'counter';
+    } else if (this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
+      elementType = 'combobox';
     }
 
     if (elementType) {
@@ -1163,6 +1211,15 @@ class AuroFormValidation {
         }
       }
 
+      const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
+      
+      if (isCombobox) {
+
+        if (!elem.persistInput || elem.behavior === "filter") {
+          hasValue = elem.input.value?.length > 0;
+        }
+      }
+
       if (!hasValue && elem.required && elem.touched) {
         elem.validity = 'valueMissing';
         elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
@@ -1171,6 +1228,11 @@ class AuroFormValidation {
         this.validateElementAttributes(elem);
       } else if (hasValue && (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group'))) {
         this.validateElementAttributes(elem);
+      } else if (isCombobox) {
+        this.validateElementAttributes(elem);
+
+        // Don't run extra validation for cases where the combobox is not being used as a filter
+        validationShouldRun = elem.behavior !== 'filter';
       }
     }
 
@@ -1178,8 +1240,8 @@ class AuroFormValidation {
 
       const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
 
-      // Don't reset combobox validity if persistValue is set since we can't use the input value to validate
-      if (!isCombobox || isCombobox && !elem.persistValue) {
+      // Don't reset combobox validity if persistInput is set since we can't use the input value to validate
+      if (!isCombobox || isCombobox && !elem.persistInput) {
 
         // run validation on all inputs since we're going to use them to set the validity of this component
         this.auroInputElements.forEach(input => input.validate());
@@ -1252,6 +1314,8 @@ class AuroFormValidation {
         if (input.validationMessage.length > 0) {
           elem.errorMessage = input.validationMessage;
         }
+      } else if (this.runtimeUtils.elementMatch(elem, 'auro-combobox') && elem.errorMessage === '') {
+        elem.errorMessage = elem.input?.inputElement?.validationMessage;
       } else if (this.inputElements?.length > 0 && elem.errorMessage === '') {
         const firstInput = this.inputElements[0];
 

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

@@ -961,6 +961,52 @@ class AuroFormValidation {
             message: e => e.getAttribute('setCustomValidityRangeUnderflow') || ''
           }
         ]
+      },
+      combobox: {
+        filter: [
+          {
+            check: (e) => {
+
+              // Guard Clause: If the behavior is not 'filter', skip this validation
+              if (e.behavior !== 'filter') return false;
+
+              // Get the current input value
+              const currentInputValue = e.input.value;
+
+              // Skip validation if the input has no value
+              if (!currentInputValue) return false;
+
+              /**
+               * Let's check if the option selected and combobox value match.
+               */
+
+              // Guard Clause: If there is no option selected fail the validation
+              if (!e.optionSelected) return true;
+
+              // Guard Clause: If there is no value fail the validation
+              if (!e.value) return true;
+
+              // Guard Clause: If the selected option's value doesn't match the input value fail the validation
+              if (e.optionSelected.value !== e.value) return true;
+
+              /**
+               * Now let's make sure the user hasn't change the value in the input after selecting an option.
+               * This is to make sure there's no user confusion if they select an option but then change the value to something else.
+               */
+
+              // Guard Clause: If the current input value doesn't match the option selected value fail the validation
+              if (currentInputValue && currentInputValue !== e.optionSelected.value) return true;
+
+              // Guard Clause: If the current input value doesn't match the combobox value fail the validation
+              if (currentInputValue && currentInputValue !== e.value) return true;
+
+              // If all the checks passed the validation passes
+              return false;
+            },
+            validity: 'valueMissing',
+            message: e => e.getAttribute('setCustomValidityValueMissingFilter') || e.setCustomValidity || ''
+          }
+        ] 
       }
     };
 
@@ -969,6 +1015,8 @@ class AuroFormValidation {
       elementType = 'input';
     } else if (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group')) {
       elementType = 'counter';
+    } else if (this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
+      elementType = 'combobox';
     }
 
     if (elementType) {
@@ -1155,6 +1203,15 @@ class AuroFormValidation {
         }
       }
 
+      const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
+      
+      if (isCombobox) {
+
+        if (!elem.persistInput || elem.behavior === "filter") {
+          hasValue = elem.input.value?.length > 0;
+        }
+      }
+
       if (!hasValue && elem.required && elem.touched) {
         elem.validity = 'valueMissing';
         elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
@@ -1163,6 +1220,11 @@ class AuroFormValidation {
         this.validateElementAttributes(elem);
       } else if (hasValue && (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group'))) {
         this.validateElementAttributes(elem);
+      } else if (isCombobox) {
+        this.validateElementAttributes(elem);
+
+        // Don't run extra validation for cases where the combobox is not being used as a filter
+        validationShouldRun = elem.behavior !== 'filter';
       }
     }
 
@@ -1170,8 +1232,8 @@ class AuroFormValidation {
 
       const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
 
-      // Don't reset combobox validity if persistValue is set since we can't use the input value to validate
-      if (!isCombobox || isCombobox && !elem.persistValue) {
+      // Don't reset combobox validity if persistInput is set since we can't use the input value to validate
+      if (!isCombobox || isCombobox && !elem.persistInput) {
 
         // run validation on all inputs since we're going to use them to set the validity of this component
         this.auroInputElements.forEach(input => input.validate());
@@ -1244,6 +1306,8 @@ class AuroFormValidation {
         if (input.validationMessage.length > 0) {
           elem.errorMessage = input.validationMessage;
         }
+      } else if (this.runtimeUtils.elementMatch(elem, 'auro-combobox') && elem.errorMessage === '') {
+        elem.errorMessage = elem.input?.inputElement?.validationMessage;
       } else if (this.inputElements?.length > 0 && elem.errorMessage === '') {
         const firstInput = this.inputElements[0];
 

package/components/checkbox/dist/index.js

@@ -914,6 +914,52 @@ class AuroFormValidation {
             message: e => e.getAttribute('setCustomValidityRangeUnderflow') || ''
           }
         ]
+      },
+      combobox: {
+        filter: [
+          {
+            check: (e) => {
+
+              // Guard Clause: If the behavior is not 'filter', skip this validation
+              if (e.behavior !== 'filter') return false;
+
+              // Get the current input value
+              const currentInputValue = e.input.value;
+
+              // Skip validation if the input has no value
+              if (!currentInputValue) return false;
+
+              /**
+               * Let's check if the option selected and combobox value match.
+               */
+
+              // Guard Clause: If there is no option selected fail the validation
+              if (!e.optionSelected) return true;
+
+              // Guard Clause: If there is no value fail the validation
+              if (!e.value) return true;
+
+              // Guard Clause: If the selected option's value doesn't match the input value fail the validation
+              if (e.optionSelected.value !== e.value) return true;
+
+              /**
+               * Now let's make sure the user hasn't change the value in the input after selecting an option.
+               * This is to make sure there's no user confusion if they select an option but then change the value to something else.
+               */
+
+              // Guard Clause: If the current input value doesn't match the option selected value fail the validation
+              if (currentInputValue && currentInputValue !== e.optionSelected.value) return true;
+
+              // Guard Clause: If the current input value doesn't match the combobox value fail the validation
+              if (currentInputValue && currentInputValue !== e.value) return true;
+
+              // If all the checks passed the validation passes
+              return false;
+            },
+            validity: 'valueMissing',
+            message: e => e.getAttribute('setCustomValidityValueMissingFilter') || e.setCustomValidity || ''
+          }
+        ] 
       }
     };
 
@@ -922,6 +968,8 @@ class AuroFormValidation {
       elementType = 'input';
     } else if (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group')) {
       elementType = 'counter';
+    } else if (this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
+      elementType = 'combobox';
     }
 
     if (elementType) {
@@ -1108,6 +1156,15 @@ class AuroFormValidation {
         }
       }
 
+      const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
+      
+      if (isCombobox) {
+
+        if (!elem.persistInput || elem.behavior === "filter") {
+          hasValue = elem.input.value?.length > 0;
+        }
+      }
+
       if (!hasValue && elem.required && elem.touched) {
         elem.validity = 'valueMissing';
         elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
@@ -1116,6 +1173,11 @@ class AuroFormValidation {
         this.validateElementAttributes(elem);
       } else if (hasValue && (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group'))) {
         this.validateElementAttributes(elem);
+      } else if (isCombobox) {
+        this.validateElementAttributes(elem);
+
+        // Don't run extra validation for cases where the combobox is not being used as a filter
+        validationShouldRun = elem.behavior !== 'filter';
       }
     }
 
@@ -1123,8 +1185,8 @@ class AuroFormValidation {
 
       const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
 
-      // Don't reset combobox validity if persistValue is set since we can't use the input value to validate
-      if (!isCombobox || isCombobox && !elem.persistValue) {
+      // Don't reset combobox validity if persistInput is set since we can't use the input value to validate
+      if (!isCombobox || isCombobox && !elem.persistInput) {
 
         // run validation on all inputs since we're going to use them to set the validity of this component
         this.auroInputElements.forEach(input => input.validate());
@@ -1197,6 +1259,8 @@ class AuroFormValidation {
         if (input.validationMessage.length > 0) {
           elem.errorMessage = input.validationMessage;
         }
+      } else if (this.runtimeUtils.elementMatch(elem, 'auro-combobox') && elem.errorMessage === '') {
+        elem.errorMessage = elem.input?.inputElement?.validationMessage;
       } else if (this.inputElements?.length > 0 && elem.errorMessage === '') {
         const firstInput = this.inputElements[0];
 

package/components/checkbox/dist/registered.js

@@ -914,6 +914,52 @@ class AuroFormValidation {
             message: e => e.getAttribute('setCustomValidityRangeUnderflow') || ''
           }
         ]
+      },
+      combobox: {
+        filter: [
+          {
+            check: (e) => {
+
+              // Guard Clause: If the behavior is not 'filter', skip this validation
+              if (e.behavior !== 'filter') return false;
+
+              // Get the current input value
+              const currentInputValue = e.input.value;
+
+              // Skip validation if the input has no value
+              if (!currentInputValue) return false;
+
+              /**
+               * Let's check if the option selected and combobox value match.
+               */
+
+              // Guard Clause: If there is no option selected fail the validation
+              if (!e.optionSelected) return true;
+
+              // Guard Clause: If there is no value fail the validation
+              if (!e.value) return true;
+
+              // Guard Clause: If the selected option's value doesn't match the input value fail the validation
+              if (e.optionSelected.value !== e.value) return true;
+
+              /**
+               * Now let's make sure the user hasn't change the value in the input after selecting an option.
+               * This is to make sure there's no user confusion if they select an option but then change the value to something else.
+               */
+
+              // Guard Clause: If the current input value doesn't match the option selected value fail the validation
+              if (currentInputValue && currentInputValue !== e.optionSelected.value) return true;
+
+              // Guard Clause: If the current input value doesn't match the combobox value fail the validation
+              if (currentInputValue && currentInputValue !== e.value) return true;
+
+              // If all the checks passed the validation passes
+              return false;
+            },
+            validity: 'valueMissing',
+            message: e => e.getAttribute('setCustomValidityValueMissingFilter') || e.setCustomValidity || ''
+          }
+        ] 
       }
     };
 
@@ -922,6 +968,8 @@ class AuroFormValidation {
       elementType = 'input';
     } else if (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group')) {
       elementType = 'counter';
+    } else if (this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
+      elementType = 'combobox';
     }
 
     if (elementType) {
@@ -1108,6 +1156,15 @@ class AuroFormValidation {
         }
       }
 
+      const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
+      
+      if (isCombobox) {
+
+        if (!elem.persistInput || elem.behavior === "filter") {
+          hasValue = elem.input.value?.length > 0;
+        }
+      }
+
       if (!hasValue && elem.required && elem.touched) {
         elem.validity = 'valueMissing';
         elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
@@ -1116,6 +1173,11 @@ class AuroFormValidation {
         this.validateElementAttributes(elem);
       } else if (hasValue && (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group'))) {
         this.validateElementAttributes(elem);
+      } else if (isCombobox) {
+        this.validateElementAttributes(elem);
+
+        // Don't run extra validation for cases where the combobox is not being used as a filter
+        validationShouldRun = elem.behavior !== 'filter';
       }
     }
 
@@ -1123,8 +1185,8 @@ class AuroFormValidation {
 
       const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
 
-      // Don't reset combobox validity if persistValue is set since we can't use the input value to validate
-      if (!isCombobox || isCombobox && !elem.persistValue) {
+      // Don't reset combobox validity if persistInput is set since we can't use the input value to validate
+      if (!isCombobox || isCombobox && !elem.persistInput) {
 
         // run validation on all inputs since we're going to use them to set the validity of this component
         this.auroInputElements.forEach(input => input.validate());
@@ -1197,6 +1259,8 @@ class AuroFormValidation {
         if (input.validationMessage.length > 0) {
           elem.errorMessage = input.validationMessage;
         }
+      } else if (this.runtimeUtils.elementMatch(elem, 'auro-combobox') && elem.errorMessage === '') {
+        elem.errorMessage = elem.input?.inputElement?.validationMessage;
       } else if (this.inputElements?.length > 0 && elem.errorMessage === '') {
         const firstInput = this.inputElements[0];